WOFF Web Open Font Format

Using Custom Fonts on Web Pages

Fonts
Google Images

Text content has always been an important piece of websites, but in the early days of the Web, designers and developers were severely limited in the typographic control that they had over their webpages. This included a limitation in the fonts that they were able to reliably use on their sites. You have likely heard the term "web safe fonts" mentioned in the past. This referred to the small set of fonts that were highly likely to be included on a person's computer, meaning that if you site used one of those fonts, it was a safe bet that it would rendered correctly on a person's browser.

Today, web professionals have a host of new fonts and type options to work with, one of which is the WOFF format.

What is WOFF?

WOFF is an acronym that stands for “Web Open Font Format.” 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, Times New Roman, Georgia” - which are some of those aforementioned web safe fonts.

WOFF was submitted to the W3C as a standard for packaging fonts for web pages. It became a working draft on November 16, 2010.  Today we actually have WOFF 2.0, which improves the compression from the first version of the format by nearly 30%. In some cases, these savings can be even more substanial!

Why Use WOFF?

Web fonts, including those delivered via the WOFF format, provide a lot of advantages over other font choices. As useful as those web safe fonts have been, and there is certainly still a place for those fonts in our work, it is nice to also expand our choices and open up our typographic options.

WOFF fonts have the following benefits:

  • They are more accessible than fonts as images. WOFF styles plain HTML text with CSS, giving you accessibility and design control that images will not allow for.
  • 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. Search engines do not "see" text embedded in an image, and while ALT text can help, there is no substitute for the text itself.
  • WOFF fonts are compressed, so they are smaller than other types of font files. This will help with site download speed and overall performance.
  • 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, including:

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

It is essentially supported across the board these days, with the lone exception being all versions of Opera Mini.

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');
    }
  1. 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 Example

Here are a few examples of WOFF files:​ WOFF Page on HTML5 in 24 Hours.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 7/11/17