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

Question

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

Answer 1

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:

1. Intranet zone – sites on your local network.
2. Trusted Sites zone – sites that have been added to your trusted sites.
3. Internet zone – sites that are on the Internet.
4. 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:

1. Read up on your enterprise IE's Security Zones or talk to the group that manages your browser settings.
   1. Submit request to add your site into the intranet or trusted zones, if those are the ones that allow font download.
   2. Some policies just need you to use certain domain naming conventions to be in the Intranet zone.
2. Manually change IE settings for your box to allow you to develop and test things.
   1. If you have access, IE > Internet Options > Security Tabs > add specific sites to a zone that allows font download.
   2. 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)