The educational technology and digital learning wiki
Jump to navigation Jump to search


“The Web Open Font Format (WOFF) is a font format for use in web pages. It was developed during 2009 and is now a World Wide Web Consortium (W3C) Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.”

Mime type


Make sure that your server knows it.

Using WOFF files

In order to use WOFFs, use the CSS @font-face directive. I will alllow:

  • Defining a font name that you later can use
  • Associate one or more font files with that name. If you plan to support fairly modern plus really modern browsers, you should provide both a woff and woff2 file.


Let's create a web page that includes a [font]

  • Convert with TTF to WOFF converter to WOFF 1
  • On the same website there is also a WOFF2 converter you could try.
  • Create an html page that includes the WOFF font and use it.

Life example: http://tecfa.unige.ch/guides/WOFF/woff-blisssym-example.html (tested oct. 2015 with FF, IE and Chrome under Win8 and Ubuntu).

<!DOCTYPE html>
    <title>Simple WOFF example</title>
    <meta charset="UTF-8"/>
    <style type="text/css">
      @font-face {
      font-family: 'MyBliss';
      src:  url('BLISSYM.woff') format('woff'),
            url('BLISSYM.woff2') format('woff2');

      .blissy {font-family:MyBliss;color:blue;}
Text in one paragraph includes a <a href="http://edutechwiki.unige.ch/en/WOFF">WOFF</a> font. The Web Open Font Format (WOFF) is a font format for use in web pages is a World Wide Web Consortium (W3C) Recommendation. 
Look at the source, Lucille. Below some <a href="http://edutechwiki.unige.ch/en/Pictographic_language">Bliss symbols</a>:
<span class="blissy">
  

It also is possible to use some kind of local inline styling, but as of Oct 15, this only worked under Chrome.

<div id="scoped-content">
  <style type="text/css" scoped>
    @font-face {font-family: 'MyBliss'; src:url('BLISSYM.woff') format('woff');url('BLISSYM.woff2') format('woff2');}
  <span style="font-family:MyBliss;color:blue;">
  


  • WOFF (tips on using woff2 with FF). See also this.


  • Google fonts (you can choose among 700+ fonts and then link to these in your stylesheet).
  • Iconfonts commercial, but there is a free version.