Summary: This module explains what the web open font format is about and how an open font is loaded into a web page.
The Web Open Font Format (WOFF) is used for packing fonts with the goal of using them for displaying a web page.
You can think of WOFF as a kind of compressed file (zip file) for fonts.
Current browsers support WOFF. The Wikipedia article on WOFF gives a list of browsers with the version numbers.
The Mozilla developer network article gives explanations and a code example (for Firefox 3.6 and subsequent versions). The example CSS code snippet is shown below.
Basic CSS
Media queries/* Gentium (SIL International) */
@font-face {
font-family: GentiumTest;
src: url(fonts/GenR102.woff) format("woff"),
url(fonts/GenR102.ttf) format("truetype");
}
body {
font-family: GentiumTest, Times, Times New Roman, serif;
}The @font-face makes sure the 'Gentium' font is loaded.
It is made available under the name of GentiumTest to the subsequent CSS rules. Two source (src) lines are given for the font. One for the WOFF format, the other one for the TrueType TTF format. The second is used in case the browser does not support the WOFF format.
<!DOCTYPE html>
<html>
<head>
<title>Web page using a WOFF font</title>
<link rel="stylesheet" href="theStyleSheet.css" type="text/css">
</head>
<body>
<h3>A sample sentence using a WOFF font</h2>
<p class="Twi">Yɛfrɛ́ me Kwadwó.</p>
<h3>Stacked diacritics</h3>
<p class="Twi">Lower case open e with combining tilde and acute accent: <span>ɛ̃́ </span>(numeric entities)<p>
<p class="Twi">Lower case open e with combining tilde and acute accent: <span>ɛ̃́; (UTF8 characters)</span><p>
<h3>Note about HTML</h3>
<p>This HTML page is coded the HTML5 way. Note the very simple DOCTYPE declaration.</p>
<p>People often no longer refer to the version number 5 as in HTML5 but just to HTML as it was a few years ago.</p>
</body>
</html>
The document type is <!DOCTYPE html> which means that it is a HTML5 page. A CSS class called Twi is defined to mark passages which are in the Twi language.
In the <head> section of the HTML page above there is a link to a CSS style sheet called theStyleSheet.css. Here it is:
/* ==============================================================================*/
/* this rule makes sure the Doulos SIL - Regular file (Web Open Font Format) */
/* is loaded. */
/* The file name is 'DoulosSIL-R.woff' and the file must be present in the same */
/* directory as the web page. */
/* ============================================================================= */
@font-face {
font-family: DoulosSILW;
src: url(DoulosSIL-R.woff);
}
/* ============================================================================== */
/* A rule to define a class called 'Twi' to mark passages */
/* which should use the WOFF font */
/* ============================================================================== */
.Twi {font-family: DoulosSILW}
The style sheet refers to a file called DoulosSIL-R.woff which contains the actual font. This construction makes sure the browser downloads this font and uses it to display the web page.
To see the sample page in action download the zip file below, unpack it and view it locally with a Firefox browser with a version number 11 or later.
Web pages using WOFF phone may be displayed on smart phones as well. Smart phones these days have fairly large screens that allow to display web pages meant for desktop computers with only minor adaptions from the HTML author side. To display pages with WOFF fonts Android phones are particular interesting as there are Firefox versions available which properly render smart fonts like the DoulosSIL font.
If you directly display the web page of the previous section on a phone with a screen size of 800 x 480 pixel the display looks as follows.
The browser in the phone automatically scales the web page so that a regular desktop web page fits on the screen. This might be fine for some uses but for better readability you probably want to force the display to use the 800 pixel width. This can be achieved by inserting a view port restriction.
Viewport restriction <meta name="viewport"
content="width=device-width,initial-scale=1.0" /> in the head section.
On the actual phone it looks very readable. The screen shots below taken from an actual Android phone however look huge on most desktop computer screens.
W3C WOFF File Format 1.0 recommendation.
Implementation in different browsers.
The web page example is based on http://scripts.sil.org/using_web_fonts.
More about HTML5.
More about this module: Metadata | Downloads | Version History
This work is licensed by Hannes Hirzel under a Creative Commons Attribution License (CC-BY 3.0), and is an Open Educational Resource.
Last edited by Hannes Hirzel on Dec 14, 2012 9:35 am -0600.
"Example how to use a web open font format (WOFF) file."