In this article we will explore Web Open Font Format (WOFF). W3C members Microsoft Corporation, Mozilla Foundation, Opera Software submitted WOF on 8th April, 2010. According to W3C WOFF will be supported by all browsers soon. Refer WOFF File Format 1.0 Submission Request to W3C

IE9 has complete support of WOFF. Let's see how it works.

Step 1: Create and download WOFF font of your choice from Font Squirrel

Step 2: Add below style in the head section of the page.

<style type="text/css">
      @font-face
      {
            font-family: 'BlackadderITCRegular';
            src: url('itcblkad-webfont.woff');
            font-weight: normal;
            font-style: normal;
      }

      .myWOFF
      {
            font: 20pt BlackadderITCRegular, sans-serif;
      }

</style>

Step 3: Place a paragraph tag and apply myWOFF class on it.

<p class="myWOFF">Testing of WOFF</p>

WOFF font get downloaded when you broswe the page. Use HTTP Fox to verify that WOFF gets downloaded.

You will notice that in FireFox 4 which supports HTML 5 has some delay to apply the WOFF font but in IE9 there is no delay in displaying WOFF font.

If you are unable to see WOFF font in IE9. The reason might be due to compatibility view. Change the compatibility view to IE9 either in below two ways.

Option 1: Click on compatible view icon in the address bar.

Option 2: One change the browser mode to IE 9 if it is in some other mode.

Live Demo

This ends the article of WOFF font in HTML 5.