Why are WOFF Fonts are Hanging in Firefox

I’ve been trying to use a WOFF font called Oswald and load it locally as external requests to Google Web Fonts are sometimes slow at best. It works in Chrome and IE9 but not in Firefox! The investigation begins… And some are aborting.

Why use WOFF?

There are three main benefits to using WOFF:

How to fix this hanging!

Mozilla have a page About the Web Open Font Format (WOFF) which says “This article is in need of a technical review.” I might have to agree on that one. This page says Firefox 3.6+ supports WOFF types with the all hail @font-face. I was reading that Apache needs support for the woff type by defining a dedicated MIME type. There is also parts in the .htaccess for expiration and compression.

AddType application/x-font-woff .woff

This did not help. Now jump in the awesome site caniuse.com with it’s analysis of can i use WOFF?. This lead me to another post about WOFF on Mozilla hacks blog. Both say it’s supported. This post suggested to specify TTF font type also for those browsers that don’t support WOFF.

@font-face {
  font-family: GentiumTest;
  src: url(fonts/GenR102.woff) format("woff"),
       url(fonts/GenR102.ttf) format("truetype");
}

[blockquote class=”left”]Fonts in WOFF format are compressed but are not encrypted, the format should not be viewed as a “secure” format by those looking for a mechanism to strictly regulate and control font use.[/blockquote] Loading the font using JavaScript seems to work but still leaves hanging requests for the local fonts (which are specified in the CSS).

  WebFontConfig = {
    google: { families: [ 'Oswald::latin' ] }
    };
    (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 

JavaScript loading specific to Firefox was possible using PHP sniff but not a solution as the same CSS with @font-face is being served. So now I tried adding some of those .htaccess apache MIME types.

#add support for FONT TYPES
AddType application/x-font-woff .woff
AddType application/vnd.ms-fontobject .eot


  Header set cache-control: public
  ExpiresActive on
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"

Bingo! It seems to have worked for 3! However there are still 6 requests for WOFF files hanging. Now I think they could be different versions of the same font… like bold, thin etc… No the file is definitely there! Here is my CSS…. Mozilla what is going on? Any ideas?

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: local('Oswald Bold'), local('Oswald-Bold'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: local('Oswald Light'), local('Oswald-Light'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}

/* custom font */
h1 {
   font-family: 'Oswald', sans-serif; 
}

Frequently Asked Questions about WOFF Fonts