Why are WOFF Fonts not supported in Firefox

| | 1 min read

I have used universal font WOFF also known as Oswald for one of Drupal sites header navigation menu bar links as font style. A font(WOFF) is truly universal means the availability is improved and also the font uses less bandwidth with compressed data, which loads the websites faster.

I came across with a peculiar issue that, the font loads faster on all browsers (all versions) but not on Firefox. After checking the documentation for WOFF font and found that, it only supports lower versions of Firefox by default and not to higher versions.It doesn't mean that it wont support the higher versions of Firefox completely, but may depend for different versions of same fonts.

The following steps can fix hanging in Firefox:

  • Add the below code to the .htaccess file for compression
     AddType application/x-font-woff .woff 
  • Add the font in the theme css using @font-face
     @font-face {
      font-family: GentiumTest;
      src: url(fonts/GenR102.woff) format("woff"),
           url(fonts/GenR102.ttf) format("truetype");
    }
  • Add the different versions of same font in the css
     @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');
    }
  • Add the custom font for the content as:
     h1 {
       font-family: Oswald, sans-serif;
    }