W3C

Bert Bos | CSS tutorial – fonts

Fonts

●●●●●●●●●

Fonts (@font-face)

Fonts – contents

●●●●●●●●●

Short history of @font-face

●●●●●●●●●

Short history of @font-face

●●●●●●●●●

PDF is a single file containing everythng 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 docuyments, but th elink indicates that this is a transclusion.

(Compression, market position, CORS)

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
}

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.