WOFF

This article or chapter is incomplete and its contents need further attention. Some information may be missing or may be wrong, spelling and grammar may have to be improved, use your judgment!

Introduction[edit | edit source]

“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[edit | edit source]

application/font-woff

Make sure that your server knows it.

Using WOFF files[edit | edit source]

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.

Example[edit | edit source]

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

Donwnload BLISSYM.TTF from http://blissym.com/

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>
<html>
  <head>
    <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;}
    </style>
  </head>
 <body>
   <p>
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. 
  </p>
<p>
Look at the source, Lucille. Below some <a href="http://edutechwiki.unige.ch/en/Pictographic_language">Bliss symbols</a>:
</p>
<hr>
<span class="blissy">
  
</span>
<hr>
 </body>
</html>

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');}
  </style>
  <span style="font-family:MyBliss;color:blue;">
  
	</span>
  <hr>
</div>

Live example: http://tecfa.unige.ch/guides/WOFF/woff-blisssym-inline-example.html

Links[edit | edit source]

Web Open Font Format (Wikipedia)
WOFF File Format 1.0, W3C Recommendation 13 December 2012

Using @font-face (css-tricks.com)

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

fonts:

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