Select elements in Safari not respecting font set in CSS - html

I have a select element in my DOM, and I'm applying my own font through some CSS:
#font-face {
font-family: myFont;
src: url('myFont.woff');
}
body select{
font-family: myFont;
}
In Chrome, Firefox and IE the font looks fine. But in Safari v9.0.2, once the select is clicked, the font is lost.
I inspected it using WhatFont and got the following:
So it looks like this -apple-system - regular font has overwritten my own.
Is this standard Safari behavior?
Can I do anything about it?

try this i hope it will be work.
<style>
#font-face {
font-family: 'BebasNeueRegular';
src: url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.eot?') format('eot'),
url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.woff') format('woff'),
url('https://cdn.css-tricks.com/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.ttf') format('truetype'),
url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.svg#webfontfvFLBU0N') format('svg');
font-weight: normal;
font-style: normal;
}
</style>

Related

#font-face doesn't work in chrome, how can I fix that?

I used font face to use custom font in Chrome, but it doesn't works.
In Firefox, it works well. How can I fix it?
This is what I wrote.
#font-face {
font-family: 'abril';
src: url('./assets/fonts/AbrilFatface-Regular.eot');
src: url('./assets/fonts/AbrilFatface-Regular.eot?#iefix') format('eot'),
url('./assets/fonts/AbrilFatface-Regular.woff') format('woff'),
url('./assets/fonts/AbrilFatface-Regular.ttf') format('truetype'),
url('./assets/fonts/AbrilFatface-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
div.page-title {
font-family: 'abril';
}
I have used this font before. It worked well for me. Please try Using this Google Font (Hope its the same ). You can even download from there and use it.

Not displaying font on mac safari when added custom font-family and apply to body

View on Mac Safari:
View on Windows Chrome:
Here is the css stye
#font-face {
font-family: Gotham HTF Light;
src: url(gothamlight.ttf) format("truetype");
src: url(gotham-black.otf) format("otf");}
#font-face {
font-family: Gotham HTF Book;
src: url(gothambook.ttf) format("truetype");
src: url(gotham-black.otf) format("otf");
}
#font-face {
font-family: Gotham HTF Medium;
src: url(gothammedium.ttf) format("truetype");
src: url(gotham-black.otf) format("otf");
}
html, body {
text-rendering: optimizeLegibility;
}
body{
font-weight:normal;
}
*{
font-family:'Gotham HTF Light';
font-weight: normal;
font-style: normal;
}
input, select, textarea, button,label{
font-family:inherit;
}
How can resolve this problem if I removed the font-family:'Gotham HTF
Light'; then its working fine but whe I apply custom font it dont work
on form fields.
I had this problem and turns out the .ttf file that I was using was defective. I did not realize that right away, because in chrome worked.
To solve the problem I just downloaded other .ttf file (that worked on Safari).
User all font format to support all browse and safari too, Try This
#font-face {
font-family: 'Gotham HTF Light';
src: url((gothammedium.eot);/* IE9 Compat Modes */
src: url((gothammedium.eot?#iefix) format('embedded-opentype'),/* IE6-IE8 */
url(gothammedium.woff2) format('woff2'), /* Super Modern Browsers */
url(gothammedium.woff) format('woff'), /* Pretty Modern Browsers */
url(gothammedium.ttf) format('truetype'), /* Safari, Android, iOS */
url(gothammedium.svg) format('svg');/* Legacy iOS */
}

firefox font doesn't work

I've found strange problem on my site.
If add font in style like
font: 2.0625em/1em 'ColiseumCRoman';
it doesn't work in FF (28.0 version and in 29.0.1 the same problem)
Does not work neither the size nor the line-height nor the font. Caption is displayed by the default font.
but if I change style like
font-size: 2.0625em;
line-height: 1em;
font-family: 'ColiseumCRoman';
it works absolutely correct in FF!
I don't understand why! What's going on ?
PS. I use #font-face for adding this font
#font-face { /*ColiseumC*/
font-family: 'ColiseumCRoman';
src: url('../fonts/coliseumc.eot');
src: url('../fonts/coliseumc.eot') format('embedded-opentype'),
url('../fonts/coliseumc.woff') format('woff'),
url('../fonts/coliseumc.ttf') format('truetype'),
url('../fonts/coliseumc.svg#ColiseumCRoman') format('svg');
font-weight: normal;
font-style: normal;
}

Ie8 not rendering embedded fonts to dynamic divs

#font-face {
font-family: "England Hand";
src: url("fonts/englandhand.eot?#iefix") format("embedded-opentype"),url("fonts/englandhand.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
I have the above as the font style. Its included in the body of the page. I have not added the font family to a div and it renders there ohk. When I create a clone of this div and assign it another position and id, the font stops rendering.
There is also no error in the console. This error only occurs on IE 8 and works fine on IE 9 .
SOLUTION
Look out for js errors. Surely there will be one in there leading to the issue
I think your missing some prefixes for the ie8/ie9 support. Your code needs to look something like:
#font-face {
font-family: 'deutsch_gothicnormal';
src: url('deutsch-webfont.eot');
src: url('deutsch-webfont.eot?#iefix') format('embedded-opentype'),
url('deutsch-webfont.woff') format('woff'),
url('deutsch-webfont.ttf') format('truetype'),
url('deutsch-webfont.svg#deutsch_gothicnormal') format('svg');
font-weight: normal;
font-style: normal;
}

Custom Font STILL wont work in IE

The webpage where I'm trying to get the custom font "Duke-Fill" to display is http://www.hamlinforcongress.com/helpout.php
I'm using:
#font-face {
font-family: 'header_font';
src: url('Duke-Fill.eot?#iefix') format('embedded-opentype'),
url('Duke-Fill.woff') format('woff'),
url('Duke-Fill.ttf') format('truetype'),
url('Duke-Fill.svg#svgFontName') format('svg');
}
.header_font{
font-family: header_font;
}
I've tried every other suggestion I can find on the Internet, but nothing can make the custom font display in Internet Explorer. It works perfectly in every other conceivable browser, but not IE (surprise surprise). Help?
#font-face {
font-family: 'NimbusSanConD-Lig';
src: url('fonts/228BFB_1_0.eot');
src: url('fonts/228BFB_1_0.eot?#iefix') format('embedded-opentype'),
url('fonts/228BFB_0_0.woff') format('woff'),
url('fonts/228BFB_0_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This code works in IE. It was generated using Font Squirrel