#font-face{
font-family: gotham;
src: url('../fonts/Gotham-Light.otf');
}
I have included font named as Gotham in my css file.Its working in mozilla and all other browsers but not in IE9.
See The New Bbulletproof Fontface Syntax
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
How it works?
Internet Explorer <9 has a bug in the parser for the src attribute. If you include more than one font format in the src, IE fails to load it and reports a 404 error. The reason is that IE attempts to load as a file everything between the opening parenthesis all the way to the very last closing parenthesis. To deal with that wrong behavior, you merely declare the EOT first and append a single question mark. The question mark fools IE into thinking the rest of the string is a query string and loads just the EOT file. The other browsers follow the spec and select the format they need based on the src cascade and the format hint.
Browser compatibility:
Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11
To generate your font-kit you should use fontsquirrel.
Related
I wish to use font 'Bellota' in my website.I downloaded the font (formats-> .otf, .woff, .woff2, .eot) and copied to the folder named 'font' and I called this font in my stylesheet using the code:
#font-face {
font-family: 'bellota';
src: url("fonts/Bellota-Regular.eot");
src: url("fonts/Bellota-Regular.eot") format("embedded-opentype"),
url("fonts/Bellota-Regular.woff2") format("woff2"),
url("fonts/Bellota-Regular.woff") format("woff"),
url("fonts/Bellota-Regular.otf");
}
Now the font is displayed in chrome but not in Firefox. Should anything be done specifically to use it in firefox?
The Firefox does not support the EOT file type thus making the whole #font-face destructed. Removed it and only put WOFF file in the CSS and it should work fine now.
I come across this problem all the time where my fonts work in every browser except Firefox. I have multiple sites that use multiple fonts all hosted on the same Cloudfront instance. Searching is pointless because every result is about setting up my CORS settings which work perfectly fine for every other browser and font file.
Currently I have a font file that shows up in the network tab as a 200 request and going directly to the file downloads it for me but I still get
downloadable font: download failed (font-family: "veneerregular" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://example.com/fonts/CZ/veneer.ttf
in the console.
Here is my #font-face declaration
#font-face {
font-family: 'veneerregular';
src: url('/fonts/CZ/veneer.eot');
src: url('/fonts/CZ/veneer.eot?#iefix') format('embedded-opentype'),
url('/fonts/CZ/veneer.ttf') format('truetype'),
url('/fonts/CZ/veneer.svg#veneerregular') format('svg');
font-weight: normal;
font-style: normal;
}
I have also run this program against the ttf fonts to flip an embeddable flag so they will work in IE http://carnage-melon.tom7.org/embed/
The only solution that seems to work is to provide data-uris for the fonts but that creates HUGE css files which I don't want. Is there something I am missing? where else should I be looking? Seems like every 2 weeks some font stops working on firefox.
So I have an #font-face setup that works in everything but firefox - a common occurance according to google.
Here's the quircky bit. If I set the font-weight to bold (in firebug) it will work, if I set it back to normal it will return.
If I edit the font-face in firebug it will work instantly - even if I put it back to what it was in the first place.
eg:
#font-face {
font-family: PlayBold;
src: url(Play-Bold-webfont.eot);
src: url(Play-Bold-webfont.eot?#iefix) format('embedded-opentype'),
url(Play-Bold-webfont.woff) format('woff'),
url(Play-Bold-webfont.ttf) format('truetype'),
url(Play-Bold-webfont.svg#PlayBold) format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
#testtext {
font-family: PlayBold;
}
Result: Not using the font.
Go into firebug and change anything in the font-face (even just replacing a character with the same character it used to have) and it starts working again.
Why doesn't firefox load the font-face properly in the first place?
Chromium 28, firefox 22.
When Gecko displays a page that uses web fonts, it initially displays
text using the best CSS fallback font available on the user's computer
while it waits for the web font to finish downloading. As each web
font finishes downloading, Gecko updates the text that uses that font.
This allows the user to read the text on the page more quickly.
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
THINGS TO TRY:
shuffling the font formats around, possibly putting the TTF or WOFF first
removing "font-variant: normal;" from the "#font-face" declaration because it doesn't belong there
properly quote the uri's in your css url(file.ttf) -> url('file.ttf')
~last resort~ use a data uri generator and embed the fonts into the CSS
src: url('data:application/octet-stream;base64,BLAHBLAHBLAH==') format('embedded-opentype'),
I have absolutely no succes in getting IE 10 to display custom fonts. Has anyone else a solution for this? I can see a few shout-outs on the net that others have trouble with their fonts in IE 10, but no solutions or confirmed bugs to be found.
Anyone with the same experience or solution?
This is what I have right now, and it works well in IE before 10, Chrome and Safari:
#font-face {
font-family: "LCD";
src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.ttf');
}
<!--[if IE]>
<style type="text/css">
#font-face {
font-family: "LCD";
src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.eot');
}
</style>
<![endif]-->
I have tried to substitute with font files in other formats woff, ott etc. but no luck at all with that.
The answer which hinted at font-squirrel made it Work.
Now the working markup (for IE 10) is:
#font-face {
font-family: "LCD";
src: url('/Public/Fonts/quartz_regular-webfont.eot');
src: url('/Public/Fonts/quartz_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/Public/Fonts/quartz_regular-webfont.woff') format('woff'),
url('/Public/Fonts/quartz_regular-webfont.ttf') format('truetype'),
url('/Public/Fonts/quartz_regular-webfont.svg#quartzregular') format('svg');
font-weight: normal;
font-style: normal;
}
I assume this is in an HTML file, due to the HTML comments and style elements...if not, look into that.
Beyond that, just use the #font-face generator
Is it possible that IE10 does not render web fonts if Security Mode is activated? After deactivating (internet options - security) my websites were displayed correctly ...
I had the font-squirrel #font-face working in everything but IE, myproblem though was that the .woff was the only thing not included in IIS mime-types on my server. That might help someone who's also ended up on this question.
I just came across a client reporting he was unable to see the webfont on his website. Ends up that the "High" security level (in IE options) blocks web fonts by default. You can create a custom security level that is basically "High" but still enables web-fonts. Or just turn it down to medium-high.
The font-face not updated on IE 10 -> reference , you can use it same IE-9
you can learn how use font-face here
i think you include all type of your font...
I used this here:
http://www.impressivewebs.com/ie10-css-hacks/
More specifically:
#media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
}
By using this we can just pop in a nice alternative font and still have sexyness in the other browsers with open fonts.
Try the fonts here:
http://cssfontstack.com
Must add that the fontface generator doesn't fix this for all fonts. When using the font Helvetica Neue Medium Condensed (HelveticaNeueLTW1G-MdCn) for instance. I'm using multiple fonts on a website. They all work with the fontface generator, except that Helvetica-font.
I'm using the FontAwesome font on an OSS app I'm running and I can't seem to get past Firefox's font sanitizer.
The files are all served out the same domain, the paths are correct, and I'm using the official css from FontAwesome which works in Firefox when served via their site and the local docs.
So I must be missing something simple.
live url: https://bmark.us
[11:39:02.945] downloadable font: invalid version tag (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0)
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot # http://127.0.0.1:6543/static/css/responsive.css
[11:39:02.945] downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0)
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot # http://127.0.0.1:6543/static/css/responsive.css
Are examples of Firefox's errors when I try to correct this via dev. I've tried to do full root paths /static/font and relative to the css ../font/ and it always fails with these errors for me.
Everything works in Chrome and such. It only seems Firefox hates me. I've searched through the other answers and I've got the whole series of font faces.
https://github.com/mitechie/Bookie/tree/develop/bookie/static/font
Thanks for any hints.
Thanks, this was a two part problem.
The second part comes first. The sample css from the fontawesome.scss uses single quotes around the paths of the various font formats. When I ran my scss builder (pyscss) on them, it stripped them. They needed to be double quotes.
Since there were no quotes, FF failed to parse the src: url(...) bit. Since it failed that it only had the src: ..eot that's meant for IE to have and it didn't work in FF.
Changing the quotes to double quotes made everything happy.
So this is my fault using pyscss and it's parser that ended up breaking the syntax for Firefox.
Thanks Matt for helping me look closer at this.
A) Are you sure your server has the mime types set for eot/woff/ttf/svg??
B) It looks like you're running in to a problem with the EOT. that could be explained by the fact that Firefox does not support EOTs; it uses WOFF and TTF.
C) Have you tried to debug using Firebug or Firefox's native developer tools?
D) Can you post your (relevant) CSS and HTML?
I ran into the same problem on one of my clients websites.
#font-face {
font-family: 'SourceSansProBlack';
src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot');
src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format('embedded-opentype'),
url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format('woff'),
url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format('truetype'),
url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format('svg');
}
The above worked in firefox. The one below didn't work.
#font-face {
font-family: 'SourceSansProBlack';
src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot');
src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format(embedded-opentype),
url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format(woff),
url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format(truetype),
url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format(svg);
}
Turns out the format specifiers need to be quoted like format('svg'). Some of the css stylesheets served by the sites don't quote the format specifiers. I have experimented with the path with both single and double quotes and that didn't make any difference. So I can say that it is the problem with unquoted format specifiers rather than the double/single quoted paths.
In my case it was enough to place .eot/.woff/.svg/.ttf files in the same *.war file as other static content(css, png etc.) is placed. Looks like FF and IE found downloading font files from other servers dangerous.
I know this is coming in late, but the best option is to use font-awesome from the CDN. You will hardly run into this kind of error if you do so.
If you are referencing the font from an external file, comment out the lines:
#font-face {
font-family: FontAwesome;
src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot");
src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff2") format("woff2"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff") format("woff"), url("../vendors/font-awesome/fonts/fontawesome-webfont.ttf") format("truetype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format("svg");
font-weight: 400;
font-style: normal
}
and use the link from the CDN in the head instead
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head
and you would be good to go.