W3C

Bert Bos | CSS3 – fonts

Fonts

Fonts (@font-face)

Fonts – contents

Short history of @font-face

Short history of @font-face

PDF is a single file containing everything the document needs: images, text and fonts. ePUB is the same: one file (a zip file in this case) with everything in it. But on the Web we prefer “virtual” inclusions. Using a term invented by Ted Nelson in the 60s, we call that “transclusion:” a component of a document is itself a document, with its own address (URL), allowing it to be re-used, cached and updated independently.

„Font embedding” works like that: a document points to a style sheet and the style sheet points to a font file. All three are independent documents, but the link indicates that this is a transclusion.

WOFF 1.0 technically isn't as good as EOT (less compression, license information can only be carried over HTTP and is less precise), but it was quicker to implement for browsers, with less new code. WOFF 2.0 is expected to have a new type of compression that is better than EOT's.

Font-face syntax

@font-face {
 font-family: My Gill Sans;
 font-style: oblique;
 font-weight: normal;
 src: url(../GILLSAN2.eot) format("eot"),
    url(../GILLSAN2.woff) format("woff")
}
/* + three others: normal, bold and bold oblique */

body {
 font: 1em/1.3 Gill Sans, My Gill Sans, sans-serif
}

To embed a font in a document, you have to declare it in the style sheet. That requires at least two, more usually four steps, rarely five:

  1. Giving the font a name by which it will be used in the style sheet. Some people prefer to use actual name of the font that the font designer gave it. Others like to indicate in the name that this is an embedded font rather than a system font (“My Gill Sans”), and some people give it a name that refers to its function in the style sheet (“subtitle font,” “menu font”).
  2. Giving the URL (or URLs) where the font can be downloaded from. If the font is available in different formats, you can give different URLs, and let the formatter choose one it can handle.
  3. Giving the style for which the font is intended (normal, italic or oblique). If omitted, the default is normal. Usually people give the actual style that the font was designed for, but nothing stops you from using a font in a different way. E.g., you might want to use a handwriting-like font as the italic style for some other font.
  4. Giving the weight for which the font is intended. Again, most people will use the weight that the font designer designed it for, but that is not required. When omitted, the font is assumed to be normal weight.
  5. Giving the font stretch the font is meant for. Font stretch (from ultra-condensed to ultra-expanded) is a new dimension in level 3, in addition to the style and the weight.

And then in the rest of the style sheet, you use it exactly like any other font. The formatter will look for font family names among the @font-face rules first, and if not found, in the system fonts.

Font licenses

Fonts are subject to copyright

Depending in the license, you can put a font on a server:

A flag in the OpenType file indicates the most common types of licenses.

Font licenses

Types of licenses (flags in OpenType):

WOFF (by means of an HTTP header) and EOT (by means of embedded info) allow the browser to check if the font is used for the right documents.

A tool like Microsoft's WEFT or my own mkeot (both of them for creating EOT files) will check the OpenType flags and refuse to create an EOT file if the license flag indicates a license that doesn't allow font embedding.

(You can always use a tool such as Fontforge to change the flags, but that doesn't change the fact that putting the font on a server may be illegal.)

The magic of WOFF and EOT

No DRM, but rules of conformance
(defined by a W3C specification)

Author of document indicates

  1. In the style-sheet: which font he used
  2. In the font (EOT) or on the server (WOFF): which documents use that font

The UA (browser) follows link 1 and verifies link 2

In the case of WOFF, you have to configure the HTTP server to return a special header (Access-Control-Allow-Origin, borrowed from CORS) whenerver the client (the browser) asks to verify a document. The verification is not for an individual document, but for a whole domain.

This is quite difficult to set up, but in the case that the font is licensed for all documents on the same server as the font, the header is not necessary.

EOT is more flexible and more precise. The EOT file and the document can be on any kind of server (not just HTTP). The EOT file contains the list of documents (their URLs or a common prefix)

Luckily more and more font makers are satisfied with a restriction to a whole domain (and thus with WOFF). But some font makers set the “restricted” flag in the OpenType font file to force you to read their special conditions or contact them.

Online help

Web sites such as Font Squirrel offer collections of free fonts and provide tools to help with writing the @font-face rules for CSS.

Also see the W3C's Fonts on the Web page.