Skip to content Skip to navigation

OpenStax_CNX

You are here: Home » Content » Web Open Font Format

Navigation

Lenses

What is a lens?

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

This content is ...

In these lenses

  • CSS display tagshide tags

    This module is included inLens: CSS - Cascading Style Sheets
    By: Hannes Hirzel

    Comments:

    "Example how to use a web open font format (WOFF) file."

    Click the "CSS" link to see all content selected in this lens.

    Click the tag icon tag icon to display tags associated with this content.

  • HTML-CSS display tagshide tags

    This module is included inLens: HTML, XHTML and CSS
    By: Hannes Hirzel

    Comments:

    "Introduces the idea how a font may be downloaded from the web and used to display a web page."

    Click the "HTML-CSS" link to see all content selected in this lens.

    Click the tag icon tag icon to display tags associated with this content.

Recently Viewed

This feature requires Javascript to be enabled.

Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.
 

Web Open Font Format

Module by: Hannes Hirzel. E-mail the author

Summary: This module explains what the web open font format is about and how an open font is loaded into a web page.

Introduction

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.

Sections

Note:

This module is still a work in progress but may contain enough information for some audiences.

Usage example

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.

/* 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.

Sample web page code

The code of the sample web page



<!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>&#603;&#771;&#769; </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.

CSS

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.

The sample page in action

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.

The three necessary files

  • theSamplePage.html
  • theStyleSheet.css
  • DoulosSIL-R.woff
zip file.

The sample page on a smart phone

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.

Regular desktop HTML file as displayed on a 800 x 480 pixel screen on a smart phone

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.

Screen 800 x 480 pixel

Portrait orientation

HTML file on smart phone with view port restriction; portrait orientation; 800 x 480 pixel

References

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.

Content actions

Download module as:

PDF | EPUB (?)

What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

Downloading to a reading device

For detailed instructions on how to download this content's EPUB to your specific device, click the "(?)" link.

| More downloads ...

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks