ie9 webfonts not loading - css

I've tried all the other solutions provided here and elsewhere and I'm still having issues with webfonts loading in ie9.
Implemented the fix to the .htaccess file:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Not receiving any css3 error messages in ie developer console.
Thing is when the initial page loads, the fonts don't load but when I navigate to any other page on the site, the fonts then load. If I go back to the initial page the fonts will now load too.
Feel like I've tried everything I was able to find on the web.
Heres my css:
/** FONTS **/
#font-face {
font-family: 'UniversUltraCondensedRegular';
src: url('../fonts/univers-ultracondensed-webfont.eot'); /* IE9 Compat Modes */
src: url('../fonts/univers-ultracondensed-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/univers-ultracondensed-webfont.woff') format('woff'), /* Modern Browsers */
url('../fonts/univers-ultracondensed-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/univers-ultracondensed-webfont.svg#UniversUltraCondensedRegular') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'WebSymbolsRegular';
src: url('../fonts/websymbols-regular-webfont.eot'); /* IE9 Compat Modes */
src: url('../fonts/websymbols-regular-webfont.eot?#iefix') format('embedded- opentype'), /* IE6-IE8 */
url('../fonts/websymbols-regular-webfont.woff') format('woff'), /* Modern Browsers */
url('../fonts/websymbols-regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
Here's the link to the site!
Thanks

TRY USING AN ABSOLUTE URL
#font-face { font-family: 'UniversUltraCondensedRegular'; src: url('../fonts/univers-ultracondensed-webfont.eot');
becomes
#font-face { font-family: 'UniversUltraCondensedRegular'; src: url('http://www.yourdomain.com/fonts/univers-ultracondensed-webfont.eot');

In theory, the CSS you provided should work. Most likely, your problem is caused either by using the wrong paths or by having the wrong file permissions for your font files.
How to tackle this issue :
First, test whether everything works correctly if you use absolute paths (as zaba suggested).
If that does work, it means your paths are incorrect. In that case, make sure the path is relative to the CSS file that contains the #font-face statement.
If that doesn't work, then your issue is probably not related to the pathname. In that case, check whether the file permissions are OK for your font files and the folder it's in.

Related

Custom font declaration doesn't work

I'm using the following code in my css:
#font-face {
font-family: "rsfont";
src: url("rsfont.ttf");
}
body {
font-family: 'rsfont';
}
I have a rsfont.ttf file in the same folder as my css file, but it just doesn't work. Why?
.ttf font works in Safari, Android, iOS. To make the font work in all browsers you need to make more font formats using a fontface generator. You can use the one on fontsquirrel
Your final #fontface declarations should be something like this to work in all browsers supporting the #fontface
#font-face {
font-family: 'rsfont';
src: url('rsfont.eot'); /* IE9 Compat Modes */
src: url('rsfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('rsfont.woff') format('woff'), /* Modern Browsers */
url('rsfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('rsfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
You could try to change it to the following
#font-face {
font-family: "rsfont";
src: url('rsfont.ttf') format('truetype');
}
However, not all browsers support the same filetypes! You'd need to convert it to multiple files using something like FontSquirrel. You can check a compatibility matrix here: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
You need to specify a format and for full cross browser support you should add a woff and eot. The following code will support all browsers (as long as you have the right font files)
For all modern browsers you really only need an eot and woof file.
#font-face{
font-family:rsfont;
src:url(rsfont.eot);
src:url(rsfont.eot) format("embedded-opentype"),
url(rsfont.woff) format("woff"),
url(rsfont.ttf) format("truetype")
font-weight:400;
font-style:normal
}

Even "bulletproof" #font-face not working in IE9 (wordpress site on Apache)

I have a (development, not yet live) site which has Google fonts that work great on all browsers except IE...in my case, IE9, but I suspect other IE are also affected. I'm not too concerned with backwards compatibility with IE<9, so let's just leave it at "IE9 doesn't work!"
Originally I was referring to hosted fonts at Google, then wondered if that were the problem, and used FontSquirrel to create and download a webkit. Great, still working for everyone BUT IE. I doublechecked all the CSS hacks out there, especially Paul Irish's original bulletproof syntax (http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/) and the updated version here: http://css-tricks.com/snippets/css/using-font-face/.
No dice.
So far, here's my css that works for everyone but IE:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 24, 2014 */
#font-face {
font-family: 'Open Sans';
src: url('opensans-regular-webfont.eot'); /* IE9 Compat Modes */
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('http://themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'),/* Modern Browsers */
url('opensans-regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('opensans-regular-webfont.svg#open_sansregular') format('svg'); /* Legacy iOS */
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('ubuntu-bolditalic-webfont.eot'); /* IE9 Compat Modes */
src: url('ubuntu-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/OMD20Sg9RTs7sUORCEN-7dIh4imgI8P11RFo6YPCPC0.woff') format('woff'),/* Modern Browsers */
url('ubuntu-bolditalic-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
url('ubuntu-bolditalic-webfont.svg#ubuntubold_italic') format('svg'); /* Legacy iOS */
font-weight: 700;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('ubuntu-italic-webfont.eot'); /* IE9 Compat Modes */
src: url('ubuntu-italic-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/djUe04BCq9zQJd4o6n2eG_esZW2xOQ-xsNqO47m55DA.woff') format('woff'),/* Modern Browsers */
url('ubuntu-italic-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
url('ubuntu-italic-webfont.svg#ubuntuitalic') format('svg'); /* Legacy iOS */
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('ubuntu-bold-webfont.eot'); /* IE9 Compat Modes */
src: url('ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/nsLtvfQoT-rVwGTHHnkeJj8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'),/* Modern Browsers */
url('ubuntu-bold-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
url('ubuntu-bold-webfont.svg#ubuntubold') format('svg'); /* Legacy iOS */
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('ubuntu-medium-webfont.eot'); /* IE9 Compat Modes */
src: url('ubuntu-medium-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/gMhvhm-nVj1086DvGgmzBz8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'),/* Modern Browsers */
url('ubuntu-medium-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
url('ubuntu-medium-webfont.svg#ubuntumedium') format('svg'); /* Legacy iOS */
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('ubuntu-mediumitalic-webfont.eot');/* IE9 Compat Modes */
src: url('ubuntu-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/ohKfORL_YnhBMzkCPoIqwtIh4imgI8P11RFo6YPCPC0.woff') format('woff'),/* Modern Browsers */
url('ubuntu-mediumitalic-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
url('ubuntu-mediumitalic-webfont.svg#ubuntumedium_italic') format('svg'); /* Legacy iOS */
font-weight: 500;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('ubuntu-regular-webfont.eot');/* IE9 Compat Modes */
src: url('ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/hHs22WBTTzMhSqc5uBBDKg.woff') format('woff'),/* Modern Browsers */
url('ubuntu-regular-webfont.ttf') format('truetype'),/* Safari, Android, iOS */
url('ubuntu-regular-webfont.svg#ubunturegular') format('svg'); /* Legacy iOS */
font-weight: 400;
font-style: normal;
}
I checked the console using f12 Developer tools. Nada. I can see that the stylesheet with the css gets loaded, but don't see any fonts being loaded.
Aha! Is it a MIME Type problem? Well, I added the kitchen sink to the .htaccess file:
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# allow access from all domains for webfonts
# alternatively you could only whitelist
# your subdomains like "sub.domain.com"
<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
# webfont mime types
AddType application/vnd.ms-fontobject eot
AddType font/truetype ttf
AddType font/opentype otf
AddType application/x-font-woff woff
# webfonts and svg:
<IfModule mod_deflate.c>
<FilesMatch "\.(ttf|otf|eot|svg)$" >
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
I also disabled Varnish cache, because, um? One less variable.
Restarted Apache, natch. Checked my doctype to make sure it wasn't duplicated. Nope, it wasn't. I even added the IE-edge meta tag just in case. Oh, and yes, I use html5shiv.
Anyone have a similar conundrum? Next step suggestions?
Thanks,
Joy
I had the same problem, and I confirmed that it was the IE security zone settings. Some enterprises have group policies that disable font download for certain IE security zones.
The 4 typical zones are:
Intranet zone – sites on your local network.
Trusted Sites zone – sites that have been added to your trusted sites.
Internet zone – sites that are on the Internet.
Restricted Sites zone – sites that have been specifically added to your restricted sites.
To check the zone your page is on in IE9, right click on the page, then select properties. You should see a row with the "Zone" information.
The solutions:
Read up on your enterprise IE's Security Zones or talk to the group that manages your browser settings.
Submit request to add your site into the intranet or trusted zones, if those are the ones that allow font download.
Some policies just need you to use certain domain naming conventions to be in the Intranet zone.
Manually change IE settings for your box to allow you to develop and test things.
If you have access, IE > Internet Options > Security Tabs > add specific sites to a zone that allows font download.
If the Security tab is blocked, get temporary admin access, open "gpedit.msc", then drill down to Computer Configuration > Administrative Templates > Windows Components > Internet Explorer > Internet Control Panel > Security Page > double click "Site to Zone Assignment list" > enable it, and add your domain name in the "Value name" column and the security zone number in the "value" column. The zone numbers are listed above respectively (e.g. 1 for Intranet zone)

CSS #font-face working for one font but not another <= IE8

I have successfully used the font face declarations for two fonts and it works for all browsers except IE8 and below. I am using the code from http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax. The strange thing is on IE8, one font is working and the other is not.
Here is the CSS:
#font-face {
font-family: 'FreestyleScriptRegular';
src: url('freescpt.eot'); /* IE9 Compat Modes */
src: url('freescpt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('freescpt.woff') format('woff'), /* Modern Browsers */
url('freescpt.ttf') format('truetype'), /* Safari, Android, iOS */
url('freescpt.svg#FreestyleScriptRegular') format('svg'); /* Legacy iOS */
}
#font-face {
font-family: 'GillSansMTCondensed';
src:url(Gill_Sans_MT_Condensed.eot);/* IE9 Compat Modes */
src: url('Gill_Sans_MT_Condensed.eot?#iefix') format('embedded-opentype'),
url('Gill_Sans_MT_Condensed.woff') format('woff'),
url('Gill_Sans_MT_Condensed.ttf') format('truetype'),
url('Gill_Sans_MT_Condensed.svg#GillSansMTCondensed') format('svg');
}
The FreestyleScriptRegular is not rendering correctly but the GillSansMTCondensed is. I have tried everything I can think of and every hack I can think of. I even used regenerated the eot file for the font concerned using a different application but it didn't make any difference.
Is there anything peculiar to IE8 that would prevent the second font from working?
Any ideas?
Thanks
The Gill Sans MT font is protected by copyright, and use as downloadable font via #font-face is not permitted. Some browsers technically enforce this legal restriction.
Consider trying to find a suitable free font instead, or a font that can be licensed for a fee for the intended use.
This may be keeping your CSS from rendering properly:
url('freescpt.ttf') format('truetype'), /* Safari, Android, iOS */
There is an extra space between url('freescpt.ttf') and format(. Try removing that and see what happens. Don't forget to empty all caches.
Just from looking at the code you posted, the following does not have single quotations:
src:url(Gill_Sans_MT_Condensed.eot);/* IE9 Compat Modes */
while your code here does:
src: url('freescpt.eot'); /* IE9 Compat Modes */
Try removing the quotations to make it read as such:
src: url(freescpt.eot); /*IE9 Compat Modes */
Hopefully this will help you resolve your problem.

DIN webfont in Firefox and IE not working

I'm having problems with implementing the DIN font in Firefox and MSIE. It works fine in Chrome.
Here's the import code:
#font-face {
font-family: DINweb;
src: url('/wp-content/themes/quickstep-child/DINWeb.eot');
src: url('/wp-content/themes/quickstep-child/DINWeb.eot?#iefix') format('embedded-opentype'),
url('/wp-content/themes/quickstep-child/DINWeb.woff') format('woff'),
url('/wp-content/themes/quickstep-child/DINWeb.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
The font is being called like this in CSS:
font-family: DINWeb, sans-serif!important;
The website is www.andvordgrafisk.no
This syntax is working for me:
#font-face {
font-family: 'DIN_Medium';
src: url('../fonts/DIN_Medium.eot'); /* IE9 Compatibility Modes */
src: url('../fonts/DIN_Medium.eot?') format('eot'), /* IE6-IE8 */
url('../fonts/DIN_Medium.otf') format('otf'),
url('../fonts/DIN_Medium.ttf') format('truetype'); /* Safari, Android, iOS */
}
If you don't have the extension, you can generate them here http://www.freefontconverter.com/
The Firefox console shows error messages that say, both for the .woff resource and the .ttf resource, “downloadable font: download failed [...] bad URI or cross-site access not allowed”. The Firebug console says: “NetworkError: 404 Not Found - http://www.andvordgrafisk.no/wp-content/themes/quickstep-child/DINWeb.ttf”, but only for the .ttf file.
Oddly enough, it seems that if you remove url('/wp-content/themes/quickstep-child/DINWeb.ttf') format('truetype'), Firefox starts using the font. So it’s as if the nonexistent .ttf is the problem, even though Firefox should not even fetch it (as the .woff resource is mentioned first).

What is wrong with these #font-face fonts in IE9?

For some reason, when I view this page in IE9, all of the #font-face fonts look way smaller than they should, and maybe like a different typeface too. As far as I can tell, everything about my syntax should be cooperating with IE9. Others have had trouble replicating the issue, so maybe it is something in my Windows font settings? Either way, if you want to try to replicate what I am seeing, I am running IE9 on Windows 7 64bit.
EDIT: I'm not sure if this is a problem with the page, or a problem with my browser. Either way, I need to get it fixed.
Looks the same for me in IE9 as other browsers, none are using the embedded font due to its different name (HelveticaMD vs the actual name in use in the CSS, Helvetica.)
It looks like your “wrong” screenshot is of a browser trying to actually use the embedded font, whereas the “right” screenshot is just the default font. If that's what you want, just get rid of the font embedding stuff.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Usage Example:
#font-face {
font-family: MyFont;
src: url(http://mysite/fonts/MyFont.ttf)
format("embedded-opentype");
}
p {font-family: MyFont, serif;
}
.woff solves the problem in IE9. I've used .eot for chrome & firefox. And .woff for IE9. Now the 3 browsers are working fine and showing the same results. Following is the code in CSS. #font-face {font-family: 'cert_fonts'; src: url('../fonts/GoudyTrajan.eot') format('eot'); src: url('../fonts/GoudyTrajan.woff') format('woff'); font-weight: normal; font-style: normal;}

Resources