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