View source for WOFF

{{incomplete}}
== Introduction ==

{{quotation|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 ==

 application/font-woff

Make sure that your server knows it.

== Using WOFF files ==

In order to use WOFFs, use the CSS <code>@font-face</code> 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 ==

Let's create a web page that includes a [[http://edutechwiki.unige.ch/en/Pictographic_language#Blissymbols|Blisssymbol font]]

* Donwnload [http://blissym.com/font/BLISSYM.TTF BLISSYM.TTF] from http://blissym.com/

* Convert with [https://everythingfonts.com/ttf-to-woff TTF to WOFF] converter to WOFF 1
* On the [https://everythingfonts.com/ 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).
<source lang="HTML5">
<!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>

</source>

It also is possible to use some kind of local inline styling, but as of Oct 15, this only worked under Chrome.
<source lang="HTML5">
<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>
</source>

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

== Links ==

* [https://en.wikipedia.org/wiki/Web_Open_Font_Format Web Open Font Format] (Wikipedia)
* [http://www.w3.org/TR/WOFF/ WOFF File Format 1.0], W3C Recommendation 13 December 2012 

* [https://css-tricks.com/snippets/css/using-font-face/ Using @font-face] (css-tricks.com)

* [https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF WOFF] (tips on using woff2 with FF). See also [https://support.mozilla.org/en-US/questions/959250 this].

'''fonts''':

* [https://www.google.com/fonts/ Google fonts] (you can choose among 700+ fonts and then link to these in your stylesheet).
* [https://icomoon.io/ Iconfonts] commercial, but there is a free version.

[[Category: Web technology tutorials]]
[[Category: Web authoring]]
[[Category: CSS]]
[[fr:tutoriel CSS]]

[[Category: Fonts]]