I have a problem with #font-face fonts not loading in IE9. IE8 and below works perfect, as do every other browser I've tried.
This is my CSS (font squirrel syntax):
#font-face {
font-family: 'ssmicon';
src: url('ssmfont3.eot');
src: url('ssmfont3.eot?#iefix') format('embedded-opentype'),
url('ssmfont3.woff') format('woff'),
url('ssmfont.ttf') format('truetype'),
url('ssmfont.svg#svgssmfont') format('svg');
font-weight: normal;
font-style: normal;
}
All glyphs are in the basic latin range (I read somewhere that IE could have an issue otherwise) and at the same server (so no cross domain issue). I have set Access-Control-Allow-Origin to * just in case. Still no success (at least not according to http://netrenderer.com/. Unfortunately, I don't have access to an IE browser at the moment). Here is a page affected: http://xn--ssongsmat-v2a.nu/ssm/Test3
Any other ideas what specific requirements IE9/10 might have when it comes to web fonts?
This was a minification issue after all. Seems like IE9 and IE10 are very picky about line breaks being kept in some places, so font-face declarations have to be kept away from all minification.
Related
I have some web fonts that work correctly in all browsers except IE11. The strange thing is, if you go to this page: http://cscart.create26.com/index.php?dispatch=products.view&product_id=179 and then inspect the "features" bullet points with IE11 developer tools, suddenly all the fonts work. Any ideas?
#font-face {
font-family: 'Helvetica-Condensed-Black';
src: url('../media/fonts/helvetica-condensed-black-webfont.eot');
src: url('../media/fonts/helvetica-condensed-black-webfont.eot?#iefix') format('embedded-opentype'),
url('../media/fonts/helvetica-condensed-black-webfont.woff') format('woff'),
url('../media/fonts/helvetica-condensed-black-webfont.ttf') format('truetype'),
url('../media/fonts/helvetica-condensed-black-webfont.svg#helvetica-condensed-black-sRg') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'Helvetica-Condensed-Black';
src: url('../media/fonts/helvetica-condensed-black-webfont.svg#helvetica-condensed-black-sRg') format('svg');
}
}
Turns out I had a blank font-family declaration on the body tag. I must have forgotten to remove it when I was making some changes. Removing the blank "font-family: ;" fixed the issue.
It works fine here. But if you check your developer tool's network tab, you'll see you're loading a lot of variations of the same font. In Chrome, you're loading both the WOFF and the SVG version of Helvetica Black Condensed, and the SVG, WOFF and TTF for Helvetica Condensed.
I figure improving your #font-face rule will reduce the chance of weird browser quirks.
This is a little unrelated to the question but may help someone stumbling upon this post.
IE11 not printing web page. It turns out that CSS files that reference #font-face in them will result in IE11 printing to fail.
Tested and confirmed on Windows 7 Professional.
The problem is the whole website doesn't show text until I inspect element with Chrome. It all works fine on other browsers.
I don't have any chrome extensions installed and am using an incognito window, but still nothing.
The website passes validation via W3C - the site is: http://www.toricks.com
I'm using #font-face, which by looking at it seems to be setup fine!
Can anyone shed any light on this?
You can try the Font Squirrel way of adding the #font-face like this:
#font-face {
font-family: 'Comfortaa';
src: url('comfortaa.eot');
src: url('comfortaa.eot?#iefix') format('embedded-opentype'),
url('comfortaa.woff') format('woff'),
url('comfortaa.ttf') format('truetype'),
url('comfortaa.svg#comfortaanormal') format('svg');
font-weight: normal;
font-style: normal;
}
I think this has the best cross-browser support. Make sure you convert your font to all the different types (you can do that with the Font Squirrel generator).
I'm having problems getting my web font in small caps using "font-variant: small-caps". Here's my findings and what I went through, ruling out possible problems :
My initial thought was that the .woff file was not rendering small-caps for some reason. I've ruled this out because the font renders fine in Safari and Firefox, which as far as I know use the .woff format.
My second thought was that it was a webkit issue, but as Safari displays it fine, I don't think it is.
I'm not using twitter bootstrap, so no text-rendering: optimizelegibility, I've also tried resetting it to auto.
I tried the font-feature-settings: 'smcp' including browser prefixes, which doesn't render small caps (only the first letter is capitalized, across all browsers)
Am I missing something out?
edit
After further research, I found a fix, which is to add font-variant:small-caps to the #font-face, like so :
#font-face {
font-family:'MYFONT';
src:url('../fonts/MYFONT.eot');
src:url('../fonts/MYFONT.eot?#iefix') format('embedded-opentype'),
url('../fonts/MYFONT.ttf') format('truetype'),
url('../fonts/MYFONT.woff') format('woff'),
url('../fonts/MYFONT.svg#myfont') format('svg');
font-variant:small-caps
}
It turns out that only the stack was affected by this. Assigning a #font-face like so works as expected, in every font format supported by Chrome:
<style>
#font-face {
font-family:'MYFONTttf';
src:url('../fonts/MYFONT.ttf') format('truetype');
}
</style>
<div style="font-family:MYFONTttf; font-variant:small-caps">
works as expected, in small-caps
</div>
I think the key is, oddly enough, not to include the SVG-formatted font. Including just the WOFF and TTF seems to make it display alright.
I generated my various font files using Font Squirrel, so I ended up with .woff, .ttf, .svg, and .eot files. My font-related CSS was:
#font-face {
font-family: "foo";
src: url(/fonts/foo.eot);
src: url(/fonts/foo?#iefix) format('eot'), url(/fonts/foo.woff) format('woff'), url(/fonts/foo.ttf) format('truetype'), url(/fonts/foo.svg) format('svg');
font-weight: normal;
font-style: normal;
}
generated by Compass from:
+font-face("foo", font-files("/fonts/foo.woff", "/fonts/foo.ttf", "/fonts/foo.svg"), "/fonts/foo.eot", normal, normal)
which is in keeping with Compass's SASS font-face guidelines.
Removing the reference to the SVG seemed to fix it. I also tried switching the order of the TTF and the SVG (breaking Compass's 'recommended order' for font files) but that didn't help.
Taking a quick look around, it seems like Chrome has other miscellaneous problems with rendering SVG fonts. This isn't a really elegant solution but it might be necessary until Chrome sorts out its SVG issues.
I'm having an issue with #font-face in my site with two browsers: Firefox and Chrome.
In Firefox the #font-face rule just doesn't work, it uses the fallback font —Helvetica—
I have declared the font like this at the top of my stylesheet:
#font-face {
font-family: 'pf_centro_sans_proregular';
src: url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.eot');
src: url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.eot?#iefix') format('embedded-opentype'),
url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.woff') format('woff'),
url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.ttf') format('truetype'),
url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.svg#pf_centro_sans_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
If I type the URI in the browser it download the font without problem, so, the font is there (Opera and Safari displays the site with the right font)
In Chrome suddenly (with some update I guess) the menu changed to the fallback font, yes, just the menu, the rest of the site behaves as expected.
I know the font is there and my CSS shouldn't be that bad because it works in Safari (both, desktop and mobile) and in Opera.
Any hints with this?
Thank you for your time and help.
It should just be a matter of changing the font url from http://fonts.googleapis.com/css to https://fonts.googleapis.com/css to secure this link.
I am using a custom font-family with following css rule:
#font-face {
font-family: 'matrix';
src: url('MaSGRgLn.eot');
src: url('MaSGRgLn.eot?#iefix') format('embedded-opentype'), url('MaSGRgLn.woff') format('woff'), url('MaSGRgLn.ttf') format('truetype'), url('MaSGRgLn.svg#MatrixScriptGr-RegularLin') format('svg');
font-weight: normal;
font-style: normal;
}
I have transformed my main font to all alternatives to be sure. Those work fine for all browsers except for ie < ie9. Is there sth i am missing or haven't paid attention to?
One important thing to note, based on my tests, is that the font-family name must match that what is inside the EOT file (viewable with hex-editor or if you have a matching TTF and Windows, the font preview will tell you).
IE8 does not display your font if the name differs, IE9 (even in IE8 mode) doesn't have this problem.
In your case, the SVG version has the name "MatrixScriptGr-RegularLin". Try using the same name in you CSS #font-face font-family definition.