W3C Working Draft: Web Fonts

1. Introduction

1.1. Font features of CSS1

The CSS1 specification allows the setting of various font properties on HTML elements. The properties include family name (eg 'Times', 'Arial', 'New Century SchoolBook'), weight (eg 'normal', 'bold', '400'), style (eg 'italic') and size (eg '12pt'). It allows these properties to be inherited by, and then modified by, child elements. For example, various font properties may be set on a paragraph, and a bold element within that paragraph can be made to have the same font - but in a heavier weight - by simply altering the font-weight property. The key concept here is inheritance.

In CSS1, fonts are assumed to be present on the client system and are identified solely by name. Several choices of fonts may be listed and are tried in order until a font is found that can display the required characters. If a font is available to the client that is a close stylistic match to the requested font but has a different name, it is not possible for a CSS1 implementation to select it. Generic font families such as 'serif' and 'script' are available as fallbacks if none of the listed fonts are available.

1.2. Beyond CSS1

This specification builds on and extends the CSS1 font model to allow font descriptions to be added to a style sheet. The font descripions consist of a set of font descriptors, individual pieces of information about a font, possibly including a URL where the font can be downloaded. If you are not familiar with the sort of information used to classify fonts, see the Appendix.

This provides additional capabilities:

intelligent client-side selection of a suitable font from the collection of fonts known to the platform or user agent
synthesis of a replacement font
downloading a font provided over the Web

The key concept here is font description and reference to improve typographic richness whilst continuing to use the inheritance and cascade mechanisms.

2. Finding Fonts

There are four ways to provide a font: name matching, intelligent matching, synthesis and download.

Name matching
This involves using an existing, accessible font that has the same family name as the requested font (note that the appearance and the metrics might not necessarily match, if the font that the document author used and the font on the client system are from different foundries). The matching information is restricted to the CSS font properties, including the family name.
Intelligent matching
This involves using an existing, accessible font that is the closest match in appearance to the requested font. (Note that the metrics might not match exactly). The matching information includes information about the kind of font (text or symbol), nature of serifs, weight, cap height, x height, ascent, descent, slant, etc.
Synthesis
This involves creating a font which is not only a close match in appearance, but also matches the metrics of the requested font. The synthesizing information includes the matching information and typically requires more accurate values for the parameters than are used for some matching schemes. In particular, synthesis requires accurate width metrics and character to glyph substitution and position information if all the layout characteristics of the specified font are to be preserved.
Download
This involves fetching a font over the Web and using it to display text in the current document. This is similar to the process of fetching images, sounds or applets over the Web for display in the current document, and likewise can cause some delay before the page can be displayed.

Progressive rendering is a combination of download and one of the other methods; it provides a temporary substitute font (using name matching, intelligent matching, or synthesis) to allow content to be read while the requested font downloads. Once the real font has been succesfully downloaded and temporarily installed, it replaces the temporary font, hopefully without the need to reflow.

3. Adding WebFonts to CSS

The font description provides the bridge between a font reference (within a stylesheet) and the font data , which is the data needed to format text and to render the glyph representations to which the characters map - the actual scalable outlines or bitmaps. Fonts are referenced by style sheet properties. The font description is used to select the relevant font data. The font description consists of descriptors which provide the location of the font data on the Web, and/or characterize that font data. The font descriptors are also used to match font references with the correct font description.

Font descriptors may be classified into three types:

those that provide the link between the CSS usage of the font and the font description - these have the same names as the corresponding CSS font properties
the URL for the location of the font data
those that further characterize the font, to provide a link between the font description and the font data

Font descriptions are contained in an at-rule. At-rules - so called because they start with the @ symbol - were introduced in CSS 1 where they were used to import other stylesheets. Ordinary CSS rules start with a selector, and apply solely to the selected HTML elements. At-rules have no selector, and apply to the whole style sheet.

The general form of this new at-rule is

"@font-face { <font description> }"

where the font description has the form

descriptor: value;
descriptor: value;
[...]
descriptor: value;

For example, here the font 'Robson Celtic' is defined and referenced in a style sheet contained in an HTML document.

<HTML>
     <HEAD>
       <TITLE>Font test</TITLE>
       <STYLE TYPE="text/css" MEDIA="screen, print">
         @font-face {
           font-family: "Robson Celtic"
           src: url(http://site/fonts/rob-celt)
         }
         H1 {font-family: "Robson Celtic", serif}
       </STYLE>
     </HEAD>
   
     <BODY>
       <H1> This heading is displayed using Robson Celtic</H1>
     </BODY>
   </HTML>

The style sheet (in the STYLE element) contains a CSS rule that sets all H1 elements to use the 'Robson Celtic' font family. A CSS1 implementation will search the client for a font whose family name and other properties match that name and, if it fails to find it, will use the UA-specific fallback serif font which is defined to exist.

A Web Font implementation will seach all the @font-face at-rules for a font description defining Robson Celtic. I this example we have such a rule, which will be matched; in this example it doesn't contain much font data but does have a URL where the font can be retrieved and temporarily installed on the client for rendering this document. There is a fuller example later in this document.

If the font Robson Celtic had been installed on the client system, this would cause the UA to construct an @font-face rule for the installed copy as described below, which would have been matched before the downloadable font in the example above.

Downlevel UAs which do not understand the @font-face rule will encounter the opening curly brackets and will skip forward until the matching closing curly brackets. This at-rule conforms to the forward-compatible CSS1 grammar in the CSS1 specification, so conforming parsers can skip it without error.

4. Font Descriptors

All descriptors exist for each @font-face at-rule; those not given explicit values take the initial value listed with each descriptor in this specification. These descriptors apply solely within the context of the font-face at-rule in which they are defined, and do not apply to HTML elements. Thus, there is no notion of which HTML elements the descriptors apply to, or whether the values are inherited by child elements.

4.1. Font-face Descriptors for Selecting a Font

These descriptors have the same names as the corresponding CSS1 font properties, and take a single value or comma-separated list of values.

The values within that list are exactly the same as those specified for CSS1. If there is a single value, that is the value that must be matched. If there is a list, any of the list items constitutes a match. If the descriptor is omitted from the @font-face the initial value is used.

4.1.1. 'font-family'

Value: [<family-name> | <generic-family>] [, [<family-name> | <generic-family>]]*
Initial: UA specific

This is the descriptor for the family name (Section 9.4) of a font and takes the same values as the CSS1 'font-family' property.

4.1.2. 'font-style'

Value:[ normal | italic | oblique ] [, [normal | italic | oblique] ]*
Initial: normal

This is the descriptor for the style of a font and takes the same values as the CSS1 'font-style' property except that a comma separated list is permitted. Oblique indicates that this face is more slanted than the normal face. Italic indicates that this is a more cursive companion face to the normal face. This avoids having to label slightly slanted normal faces as oblique, or Greek faces as italic.

4.1.3. 'font-variant'

Value: [normal | small-caps] [,[normal | small-caps]]*
Initial: normal

This is the CSS indication whether this face is a small-caps variant of a font. It takes the same values as the CSS1 'font-variant' property except that a comma separated list is permitted. Cyrillic pryamoĭ faces may be labelled with a 'font-variant' of small-caps, which will give better consistency with Latin faces (and the companion kursiv face labelled with 'font-style' italic for the same reason).

4.1.4. 'font-weight'

Value: all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800]]*
Initial: normal

This is the descriptor for the weight of a face relative to others in the same font family. It takes the same values as the CSS1 'font-weight' property with three exceptions:

relative keywords (bolder, lighter) are not permitted
a comma separated list of values is permitted
an additional keyword, all is permitted

4.1.5. 'font-size'

Value: all | [<length> [,[<length>]]* ]
Initial:all

This is the descriptor for the sizes provided by this font. Only absolute lengths are allowed, in contrast to the font-size property of CSS1 which allows both relative and absolute lengths and sizes. A comma separated list of lengths is permitted.

The initial value of 'all' is suitable for scalable fonts, so this descriptor will only be useful in an @font-face for bitmap fonts, or for scalable fonts which have hand-tuned bitmaps at specific point sizes.

4.2. Font-face Descriptors for Font Data Qualification

The following descriptor is optional within a font definition, but is used to avoid checking or downloading a font that does not have sufficient glyphs to render a particular character.

4.2.1. 'unicode-range'

Value: [<urange>]+
Initial: U+0-FFFFFFFF

This is the descriptor for the range of unicode characters (Section 9.14) covered by the font. Since this is sparse (most fonts do not cover the whole of Unicode) this descriptor lists blocks or ranges which do have some coverage. This method is extensible to any further allocation of characters without change of syntax and without invalidating existing content.

The value of this descriptor is expressed using hexadecimal numbers prefixed by "U+", corresponding to character code positions in Unicode (which is code-for-code identical to ISO 10646, which is the Document Character Set for HTML). For example, U+05D1 is the Unicode character 'Hebrew letter bet'. For values outside the Basic Multilingual Plane (BMP), additional leading digits corresponding to the plane number are added, also in hexadecimal, like this: U+A1234 which is the character on the tenth plane at hexadecimal code position 1234. At the time of writing no characters had been assigned outside the BMP. Leading zeros (for example, 0000004D) are legal, but not required.

The initial value (ie, the value used when no value is given in the style sheet) covers not only the entire Basic Multilingual Plane (BMP), which would be expressed as U+0-FFFF, but also the whole repertoire of ISO 10646. Thus, the initial value says that the font may have glyph representations for characters anywhere in ISO 10646. Specifying a value for 'unicode-range' provides information to make searching efficient, by declaring a constrained range in which the font may have glyph representations for characters. The font need not be searched for characters outside this range.

Values may be written with any number of digits. For single numbers, the character '?' is assumed to mean 'any value' which creates a range of character positions. Thus, using a single number:

unicode-range: U+20A7: no wildcards - it indicates a single character position (the Spanish peseta currency symbol)
unicode-range: U+215?: one wildcard, covers the range 2150 to 215F (the fractions)
unicode-range: U+00??: two wildcards, covers the range 0000 to 00FF (Latin-1)
unicode-range: U+E??: two wildcards, covers 0E00 to 0EFF (the Lao script)

A pair of numbers can be combined with the dash character to indicate larger ranges. For example

unicode-range: U+AC00-D7FF: the range is AC00 to D7FF (the Hangul Syllables area)

Multiple, discontiguous ranges can be specified, separated by a comma. As with other comma-separated lists in CSS, any whitespace before or after the comma is ignored. For example:

unicode-range: U+370-3FF, U+1F??

This covers the range 0370 to 03FF (Modern Greek) plus 1F00 to 1FFF (Ancient polytonic Greek).

unicode-range: U+3000-303F, U+3100-312F, U+32??, U+33??, U+4E00-9FFF, U+F9000-FAFF, U+FE30-FE4F

Something of a worst case in terms of verbosity, this very precisely indicates that this (extremely large) font contains only Chinese characters from Unicode 2.0, without including any characters that are uniquely Japanese or Korean. The range is 3000 to 303F (CJK symbols and punctuation) plus 3100 to 312F (Bopomofo) plus 3200 to 32FF (enclosed CJK letters and months) plus 3300 to 33FF (CJK compatibility zone) plus 4E00 to 9FFF (CJK unified Ideographs) plus F900 to FAFF (CJK compatibility ideographs) plus FE30 to FE4F (CJK compatibility forms).

A more likely representation for a typical Chinese font would be:

unicode-range: U+3000-33FF, U+4E00-9FFF

unicode-range: U+11E00-121FF

This font covers a proposed registration for Aztec pictograms, covering the range 1E00 to 21FF in plane 1.

unicode-range: U+1A00-1A1F

This font covers a proposed registration for Irish Ogham covering the range 1A00 to 1A1F

4.3. Font-face Descriptor Required if Numeric Values Are Present

The following descriptor is optional within a font definition, but is required if any other descriptors use numeric values in the EM space in which glyphs are defined.

4.3.1. 'units-per-em'

Value: <number>
Initial: undefined

This is the descriptor for the number of the co-ordinate units on the em square (Section 9.3), the size of the design grid on which glyph representations are laid out.

4.4. Font-face Descriptor for Referencing

This descriptor is required for referencing actual font data, whether downloadable or locally installed.

4.4.1. 'src'

Value:[ URL [format [,format]*]? | font face name ] [, URL [format [,format]*]?] | font face name]*
Initial:undefined

This is a prioritised list of URLs and/or locally installed font face names. The URL points to the font data itself. This is required if the WebFont is to be retrieved. The font resource may be a subset of the source font. The URL may be partial, in which case it is resolved relative to the location of the style sheet containing the @font-face.

The URL may have optional hints regarding the format of font resource to be found at that URL, and this information should be used by clients in format negotiation with the server. As with any hypertext reference, there may be other formats available, or the resource may have been moved; but the client has a better idea of what is likely to be there, in a more robust way than trying to parse filename extensions in URLs.

The font face name is the adorned font name of an installed font. This is most likely to be used in reader stylesheets, or author stylesheets on an intranet.

Examples:

src: url(http://foo/bar): a full URL and no information about the font format(s) available there
src: local(BT Century 751 No. 2 Semi Bold Italic): references a particular face of a locally installed font
src: url(../fonts/bar) fomat(truedoc): a partial URL which has a font available in TrueDoc format
src: url(http://cgi-bin/bar?stuff) format(opentype, intellifont): a full URL, in this case to a script, which can generate two different formats - OpenType and Intellifont
src: local(T-26 Typeka Mix), url(http://site/magda-extra) format(type1): two alternatives are given, firstly a locally installed font and secondly a downloadable font available in Type 1 format.

Access to locally installed fonts is via the font face name. The font face name is not truly unique, nor is it truly platform or font format independent, but at the moment it is the best way to identify font data. The use of the font face name can be made more accurate by providing an indication of the glyph complement required. This may be by indicating the range of Unicode character positions (Section 9.14) for which the font provides some glyph representations, using the 'unicode-range' descriptor.

4.5. Font-face Descriptors for Matching

These descriptors are optional for a WebFont definition, but may be used if intelligent font matching is desired by the author.

4.5.1. 'panose-1'

Value: [ <number> ] {10}
Initial:0 0 0 0 0 0 0 0 0 0

This is the descriptor for the PANOSE-1 number (Section 9.13) and consists of ten decimal numbers, separated by whitespace. A comma separated list is not permitted for this descriptor, because the PANOSE-1 system can indicate that a range of values are matched. The initial value is zero for each PANOSE digit, which means "any". Thus, if this descriptor is not specified, all fonts will match the Panose number.