1. Computing
Send to a Friend via Email

Discuss in my forum

WOFF - Web Open Font Format

Using Custom Fonts on Web Pages

By

What is WOFF?

WOFF is an acronym that stands for “Web Open Font Format.” It is a draft standard at the W3C that is often included in the HTML5 standard. It is used to compress fonts for use with the CSS @font-face property. It is a way to embed fonts in web pages so that you can use specialized fonts beyond the typical “Arial, Geneva, Helvetica” that you see on most pages.

WOFF was submitted to the W3C as a standard for packaging fonts for web pages. It became a working draft on November 16, 2010.

Why Use WOFF

WOFF provides a lot of advantages over other font choices. The standard fonts you can use end up making a web page that is fairly boring. There aren't a lot of fonts that are found on most computers. WOFF fonts have the following benefits:

  • They are more accessible than fonts as images. WOFF styles plain HTML text with CSS.
  • WOFF files include typographical information like contextual forms and old style figures. This gives your web pages better typography because you're using the correct characters, not just approximations.
  • WOFF fonts can help with internationalization because you can embed fonts with characters from other languages.
  • Like all CSS styled text, fonts styled with WOFF are more search engine friendly.
  • WOFF fonts are compressed, so they are smaller than other types of font files.
  • You can use WOFF files to preserve your brand identity by embedding your corporate fonts as WOFF files.

WOFF Browser Support

WOFF has excellent browser support in modern browsers.

  • Chrome 6+
  • Firefox 3.6+
  • Internet Explorer 9+
  • Opera 11.1+
  • Safari 5.1+

It is not well supported in mobile browsers with Android 3.0 and iOS 4.3 still not supporting it. Opera Mobile 11.0+ does support it.

How to Use WOFF Fonts

In order to use a WOFF file, you need to upload a WOFF file to your web server, give it a name with the @font-face property, and then call the font in your CSS. For example:

  1. Upload the font called myWoffFont.woff to the /fonts directory of the web server.
  2. In your CSS file add a @font-face section:
    @font-face {
      font-family: myWoffFont;
      src: url('/fonts/myWoffFont.woff') format('woff');
    }
  3. Add the new font name (myWoffFont) to your CSS font stack, like you would any other font name:
    p {
      font-family: myWoffFont, Geneva, Arial, Helvetica, sans-serif;
    }

Where to Get WOFF Fonts

There are two great places you can find lots of WOFF fonts that are free for commercial and non-commercial use:

If you have a license to use a font that is not available in a WOFF format, you can use a WOFF creator like at Font Squirrel to convert your font files into WOFF files. There is also a command-line tool called sfnt2woff that you can use on Macintosh and Windows to convert your TrueType/OpenType fonts to WOFF. Download the binary appropriate to your system and run it at the command line (or Terminal) and follow the instructions.

WOFF Examples

Here are a few examples of WOFF files:

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Web Design
  5. Principles of Design
  6. Fonts
  7. WOFF - Web Open Font Format

©2014 About.com. All rights reserved.