In this document, Adobe and Microsoft discuss solutions for using fonts, referred to as WebFonts, in documents on the World Wide Web. Font declaration, embedding, matching, and synthesis are addressed, and a new CSS font definition class is proposed for defining fonts and their properties.
To allow content providers to author using a wide variety of fonts, a new method of defining and embedding fonts within web documents needs to be created. Depending on which information is included with the WebFont definition and how the browser is configured, the process of realizing a font definition will follow a certain sequence:
Providing this tiered approach allows the content provider as well as the end user to control various aspects of how WebFonts are used, by indicating priorities for handling font functionality.
Content providers can indicate:
Users can indicate (depending on browser implementation):
Considerations of efficiency, performance, and clarity recommend font definitions which are separate from font references.
Style sheets can be associated with (or embedded within) several or specific HTML documents. This provides a mechanism for defining fonts for site-wide use; for defining different subsets of the same font; for overriding site-wide font definitions with page-specific font definitions; or for writing font definitions within an HTML document. Specific interactions between associated style sheets may be controlled by the user or the browser, and are beyond the scope of this document.
The ability to attach style sheets has come to HTML in the form of CSS1, or "Cascading Style Sheets, level 1" [Ref6]. CSS1 specifies style sheet syntax while "HTML3 and Style Sheets" [Ref13] specifies ways of incorporating that syntax into HTML using the LINK element for external style sheets and the STYLE element and STYLE property for internal (to the same HTML document) style information.
The fontdef class would be used to define a font for referencing in any documents to which the style sheet applies, either as a style property or a direct font reference. The embedded font "My Font" is defined and referenced in the example below.
<HTML>
<HEAD>
<STYLE>
@fontdef {
face: My Font;
src: fonts/embedded_myfont.cff;
…
}
H1 {font-face:My Font}
</STYLE>
</HEAD>
<BODY>
<H1> This is displayed using My Font</H1>
<P><FONT FACE="My Font">This is also in My
Font</FONT></P>
</BODY>
</HTML>
<DIV @fontdef {
face: CXFYTI+Tekton;
src: "Fonts/CXFYTI+Tekton.cff";
subsetchars: "MiTrnsch& ";
widths: "658,689,647,482,482,482,482,482,482,447";
stemv: 88;
italicangle: 0;
capheight: 673;
xheight: 483;
ascent: 709;
descent: -208;
bbox: "-91,-309,1000,939"
}
>
<FONT FACE=CXFYTI+Tekton>Tin chins</FONT>
</DIV>
A font definition, some style specification, and some font and style references:
<HTML>
<HEAD>
<STYLE>
@fontdef {
face: CXFYTI+Tekton;
src: "Fonts/CXFYTI+Tekton.cff";
subsetchars: "MiTrnsch& ";
widths: "658,689,647,482,482,482,482,482,482,447";
stemv: 88;
italicangle: 0;
capheight: 673;
xheight: 483;
ascent: 709;
descent: -208;
bbox: "-91,-309,1000,939";
signature: "[not yet specified]";
}
@fontdef {
face: "Tom's new font"
src: "Fonts/TomFont.cff"
}
P {
font-face: Minion-SemiboldSC;
font-family: Minion;
font-weight: demi-bold;
font-style: small-caps }
.fancy {
font-face: CXFYTI+Tekton }
.special {
font-face: "Tom's new font";
}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=fancy>Tin chins</H1>
<P STYLE="font-size: 24pt">
With full WebFont support, this is in 24 point
Minion Semibold Small Caps.
<FONT FACE="Tom's New Font">Special for Tom.</FONT>
</BODY>
</HTML>
Note that this model suggests a set of properties that are specific to a particular class (fontdef), rather than to all CSS tags. A font can be defined in a style sheet by providing only the face property (see font naming below). The remainder of the properties are optional.
For example,
FACE="Helvetica-Bold"
The following properties are optional for a WebFont definition, but are required if the author desires to embed a font.
The following property is optional for a WebFont definition, but is required if font matching is desired by the author.
panose: 02 02 03 00 00 00 00 00 00 00;
Progressive rendering requires metric information about the font in order to avoid re-layout of the content when the actual font has been loaded. Although the following properties are optional for a WebFont definition, some are required if synthesizing (and progressive rendering) is desired by the author. Should the actual font become available, the substitution should be replaced by the actual font. Any of these properties which are present will be used to provide a better approximation of the intended font.
Of these properties, the most important are subsetchars (if the font is a subset), a widths properties (one of widths, widths1, or widths2, and optionally one of defaultwidth or defaultwidth2) , and bbox which are used to prevent text reflow should the actual font becomes available. The remaining properties are used to provide a better match with the actual font appearance. Any properties which are not recognized or useful to the user agent should be ignored. This allows adding in the future optional properties for the purpose of better font substitution.
subsetchars: "MiTrnschqpueo& ";
If the subsetchars property is present, the order of characters in the subsetchars implies the order of widths.
If no subsetchars property is present, the order of widths is the same as for code points for the font used in the HTML document. If the number of entries is less than required, missing entries default to that in defaultwidth (if present), or 0.
For example,
widths: "212,230,337,497,513,792,605,188,
284,284,415,596,207,307,207,343";
Any white space is ignored within the quoted string.
Another example: a subsetted font in a WebFont fontdef containing a subsetchars properties
subsetchars: "MiTrnsch& "; widths: "658,689,647,482,482,482,482,482,482,447";
bbox="-206,-233,1006,896"
The widths1 property allows the definition of widths for single code or a range of codes. The entry is a comma-separated list in the following two formats:
c1, [w1, w2, w3] c2, c3, w4
In the first format, c1 is an number specifying a starting code value. It is followed by an array of numbers which specify the widths for code with values starting from c1 consecutively up to the end of the array. The second format defines the same width for codes in a range. In this format, c2 is the first code in the range and c3 is the last and they are followed by the width for all of the codes in the range.
Following is an example of a widths1 property.
widths1="120, [400, 325, 500],
7080, 8032, 1000"
In this example the codes 120, 121, and 122 have widths 400 325 and 500 units, respectively. The second list in this example specifies that codes between 7080 and 8032 inclusive have a width of 1000 units.
In vertical writing the character position is described by a position vector from the origin used for horizontal writing to the origin used for vertical writing. This new origin is called the writing mode 1 origin. The advance width is defined by a vector from the new origin to the writing mode 1 origin of the next character [Ref 10, pp 273].
The default position vector and vertical writing is specified by the defaultwidth2 property. This property specifies the y component of the position vector and the x and y components of the vertical width vector. The x value of the position vector is calculated from the horizontal width divided by two. For example if the defaultwidth2 entry is:
defaultwidth2: "880, 0, -1000";
the position vector and width vectors are:
v = (hw/2, 880) w = (0, -1000),
where hw is the horizontal advance width.
The default vertical width can be specified with the defaultwidth2 property. Glyphs that differ from the default vertical metrics must be included in the widths2 property. In this property, the position vector and advance width are defined by four numbers which give the x and y values of the two vectors. There are two formats that can be used to define these vectors as shown below:
widths2: "c1, [w1x, w1y, v1x, v1y,
w2x, w2y, v2x, v2y, ...],
c2, c3, w1, x, w1y, v1x, v1y";
In the first entry, c1 gives a starting code and is followed by an array. The array contains sets of four numbers which define the x and y values for the vertical advance width followed by the x and y values for the position vector. The sets of four numbers define the vertical metrics for consecutive character codes starting with code value c1. The second format defines a range of codes from from c2 to c3. These ranges use the same format as defined for the widths1 array. The range is followed by four numbers which define the vertical metrics for all codes in the range.
Following is an example of a widths2 entry.
widths2: "120, [0, -1000, 250, 772],
7080, 8032, 0, -1000, 500, 900";
This entry defines the width for character code 120 as (0,-1000) and the position vector as (250, 772). The second list in the array defines the width to be (0,-1000) and the position vector of (500, 900) for the range of codes between 7080 and 8032 inclusive.
stemv: 88;
bbox: "-206,-233,1006,896";
italicangle: 0;
capheight: 673;
xheight: 483;
ascent: 709;
descent: -208;
panose: "02 02 03 00 00 00 00 00 00 00";
widths: "250,212,318,592,496,592,591,146,
345,345,369,554,208,348,208,322,627,299,539,587,
564,569,642,480,629,600,208,208,554,554,554,412,
786,630,613,539,608,560,519,715,626,220,520,560,
465,755,612,596,543,617,577,626,466,579,495,692,
441,560,510,341,322,341,554,500,263,512,463,456,
513,444,315,476,479,200,221,409,200,728,479,476,
482,498,362,491,438,480,390,560,397,432,431,347,
200,347,554,396,396,396,167,499,333,1000,449,
449,351,863,626,279,908,396,396,396,396,167,167,
333,333,396,500,1000,440,764,491,279,742,396,
396,560,250,212,474,617,498,594,204,577,329,786,
403,452,554,348,786,361,241,554,370,403,219,480,
500,208,330,207,403,452,731,747,877,412,630,630,
630,630,630,630,794,539,560,560,560,560,220,220,
220,220,608,612,596,596,596,596,596,554,596,579,
579,579,579,560,533,569,512,512,512,512,512,512,
763,456,444,444,444,444,200,200,200,200,485,479,
476,476,476,476,476,554,476,480,480,480,480,432,
482,432";
The FONT tag, part of HTML3.2 [Ref 20], is supported by the major browser vendors [Ref 14][Ref 15][Ref 16][Ref 17]. Another way to reference WebFonts is through the STYLE element and property.
SIZE=24pt
Once a WebFont is resolved, the CSS font-face property can be used to reference the font by name. A new property is needed since font-family is not the same as font-face.
<STYLE>
H1 {font-face:My Font}
</STYLE>
The name value can be either a name matching the face value of a prior font definition, or that of a font in the host system (these are the same rules as those for the FACE property in the FONT element). Additional font properties applied to resolved WebFonts are ignored.
The font name used in the face property in the fontdef follows this approach, depending upon the type of the font. There are some adornments which may be added to the given name of the font, as either a prefix or a suffix. For the purposes of finding a font by name on a host system, the unadorned name is used.
The PostScript language name of a font is the name which, in a PostScript language program, is used as an operand of the findfont operator. It is the name associated with the font by a definefont operation. This is usually the value of the FontName key in the PostScript language font dictionary of the font [Ref 8]. For more information, see Section 5.2 of the PostScript Language Reference Manual, Second Edition [Ref 10].
Multiple Master Type 1 fonts allow specifying various design dimensions (e.g., weight, such as light to extra-bold, and width, such as condensed to expanded) [Ref 12]. Coordinates along these design dimensions are specified by numbers, and are appended as a suffix to the base font name. To specify the appearance of the font, numeric values must be supplied for each design dimension of the multiple master font. A completely specified multiple master font is referred to as an instance of the multiple master font.
The PostScript language name used for a Multiple Master Type 1 is the name the instance. If the name contains spaces (such as "MinionMM 366 465 11"), these spaces are replaced with underscores. For example, the base font name here is TektonMM and the 2 dimensions specified have values of 200 and 300:
TektonMM_200_300
For TrueType fonts, the font name used for the face property in the fontdef is that specified by the full font name in a TrueType font file (from the name table) [Ref 11].
Subsets of fonts are permitted. The face property of the fontdef must use an modified format to designate subsets:
<pseudo-unique-tag>[+]<base-font-name>
The base font name is the name of the complete font, either the PostScript language name of the complete Type 1 font or the TrueType full font name of the complete TrueType font.
The pseudo-unique tag is a prefix and must consist of exactly six uppercase alphabetic characters. A plus sign separates the tag and the name. This naming format enables user agents to recognize font subsets, to merge subsets, and to use the complete font if available locally.
For example, a subset of a particular instance of the Type 1 Multiple Master font, TektonMM:
CXFYTI+TektonMM_200_300
If WebFonts are selected using FONT tag, there are some interactions to be specified. If WebFonts are selected using the STYLE mechanism, there are no unintended interactions with the existing HTML typograhic (or "font style") and idiomatic (or "phrase") elements.
WebFonts selected by the FACE property of the FONT element are completely specified; the typographic and idiomatic elements of HTML 2.0 or HTML 3.2 do not change the font specified by a FONT element.
In HTML 2.0, the idiomatic elements are CITE, CODE, EM, KBD, SAMP, STRONG, VAR. In HTML 3.2, DFN is added. The interaction between idioms and fonts selected by the FONT element is that the innermost element which selects a font is used to render the surrounded block of text.
In HTML 2.0, the typographic elements are B, I, TT. In HTML 3.2, STRIKE, BIG, SMALL, SUB, and SUP are added. The interaction between these typographic elements and the fonts selected by the FONT element is that if the FONT element has associated with it a valid font (based on the implementation at runtime), that font is used to render the enclosed text; otherwise, the typographic element is used as in HTML 2.0 or HTML 3.2.
The following are some examples of these interactions.
The following fragment would render with the font associated with face=Tekton (assuming "Tekton" resolves to a valid font from a fontdef), regardless of any association made between a font and the emphasis element (EM):
I really <EM><FONT FACE=Tekton>love</FONT></EM> fonts!
Conversely, the following fragment would render with the font associated with the emphasis element:
I really <FONT FACE=Tekton><EM>love</EM></FONT> fonts!
In both of the following fragments, the order of elements is not considered. Each would either render with the font associated with face=Tekton when a valid font is available (synthesized, downloaded, available on the system, etc.; that is, if the fontdef successfully caused the user agent to instantiate a font), or render in whatever manner the user agent would use to indicate bold text. In any case, the rendering would not be a bold version of the Tekton font.
<B><FONT FACE=Tekton>In the News: Web fonts announcement</FONT></B> <FONT FACE=Tekton><B>In the News: Web fonts announcement</B></FONT>
In order to bind WebFonts to CSS1, we propose an additional font property.
See Naming WebFonts, above. For example,
H1 { font-family: "New Century Schoolbook";
font-weight: Bold;
font-style: Italic;
font-face: NewCenturySchlbk-BoldItalic }
"NewCenturySchlbk-BoldItalic" is the PostScript font name corresponding to the font with the full name of "New Century Schoolbook Bold Italic". The value can be either a name matching the face value of a prior fontdef, or that of a font in the host system (this is the same rules as that of the FACE property in the FONT element).
The font-face property is used if provided; if not provided or does not resolve to a realized font, the font-family, font-weight, and font-style properties are used (if provided). Any conflicts or inconsistencies are ignored between the font-face property and the combination of properties font-family, font-weight, and font-style.
[1] T. Berners-Lee, D. Connolly, "Hypertext
Markup Language - 2.0",
MIT/W3C, September 22, 1995.
<htt
p://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_toc.html>
[2] Sandia National Laboratories, "HTML Elements
List", 7 December
1995. <http://www.sandia
.gov/sci_compute/elements.html>
[3] T. Berners-Lee, D. Raggett, "Giving
Information About Other
Resources in HTML", Work in progress, W3C, 20 November 1995.
<http://ww
w.w3.org/pub/WWW/MarkUp/Resource/Specification>
[4] D. Raggett, C. Kindel, L. Montulli, E. Sink, W.
Gramlich,
J. Hirschman, T. Berners-Lee, D. Connolly, "Inserting objects
into HTML", Work in progress, W3C, 22 April 1996.
<http://www.w3.org/pub
/WWW/TR/WD-object.html>
[5] Paul Haeberli, "WebFonts Proposal",
Silicon Graphics, version
0.16. <http://reality.sgi.com/gr
afica/webfonts>
[6] Hakon W Lie and Bert Bos, "Cascading Style
Sheets, level 1",
Work in progress, W3C, 5 May 1996.
<http://www.w3.org/pub/W
WW/TR/WD-css1.html>
[7] F. Yergeau, G. Nicol, G. Adams, and M. Duerst,
"Internationalization of the Hypertext Markup Language", Work
in progress (draft-ietf-html-i18n-03.txt), 13 February 1996.
&l
t;http://ds.internic.net/internet-drafts/draft-ietf-html-i18n-03.txt>
[8] Adobe System, Incorporated, "Portable
Document Format Reference
Manual Version 1.1", 29 April 1996.
<http://www.adobe.com/supportservice/devrelations/PDFS/TN/PDFSPEC.PDF>
[10] Adobe System, Incorporated, "PostScript
Language Reference
Manual, Second Edition", Addison-Wesley, 1990, ISBN
0-201-18127-4.
[11] Microsoft Corp., "TrueType 1.0 Font
Files", Revision 1.66, November
1995. <http://www.microsoft.
com/truetype/tt/tt.htm>
[12] Adobe Systems Incorporated, "Adobe Type 1
Font Format
Supplement", Adobe Developer Support Technical Note 5015.
<http://www.adobe.com/supportservice/devrelations/PDFS/TN/5015.Ty
pe1_Supp.pdf>
[13] B. Bos, D. Raggett, H. Lie, "HTML3 and Style
Sheets", Work in
progress, W3C, 19 January 1996.
<http://www.w3.org/pub/
WWW/TR/WD-style.html>
[14] Microsoft Corp., "Microsoft Internet
Explorer HTML Support", 1996.
<http://w
ww.microsoft.com/ie/author/htmlspec/html_toc.htm>
[15] Microsoft Corp., "Microsoft Internet
Explorer 3.0 HTML Support".
1996, <http://www
.microsoft.com/ie/author/html30/html_toc.htm>
[16] Netscape Communications Corp., "EXTENSIONS
TO HTML 2.0", 1996.
<htt
p://www.netscape.com/assist/net_sites/html_extensions.html>
[17] Netscape Communications Corp., "EXTENSIONS
TO HTML 3.0", 1996.
<h
ttp://www.netscape.com/assist/net_sites/html_extensions_3.html>
[18] S. Zilles, "Quality Printing on the
Web", Adobe System, Inc., 23
April 1996. <http://www.w3.org/
pub/WWW/Printing/zilles.html>
[19] Electronic Text Center, University of Virginia,
"Part I, section 2: A Gentle Introduction to SGML", P3.
<http://etext.virginia.ed
u/tei-tocs1.html>
[20] World Wide Web Consortium, "HTML 3.2
Features at a Glance",
7 May 1996. <http://www.w3.org/pub/WWW
/MarkUp/Wilbur>