The Font Matching Process

Font Matching is the process that a browser employs to find the font to be used to render an (X)HTML element. Usually, the process is straightforward, but becomes complicated when the font-family does not have a font for bold or italic or small caps (or for any combination of these), or if it does not contain the glyphs necessary to render the text.

Web browsers maintain a database of all the fonts that are available to a web page — operating system fonts, @font-face fonts and the browser's internal fonts (if any).

The Font Matching Process

1. All the properties of the font that is required to display the element are determined.
2. The value of the font-family property of the text will be the name of the first font family with which a match will be attempted.
3. font-style is handled in this step:
   1. If the element's text does not have the property oblique or italic, the currently selected font is retained and the browser goes to step 4.
   2. If the element's text has the property oblique or italic, and the the font family contains an oblique or italic font, the font is chosen and then the browser goes to step 4.
   3. If the element's text has the property oblique or italic, and the font family does not contain an oblique or italic font, the normal font is slanted to simulate oblique/italic text and then the browser goes to step 4.
4. font-variant is handled in this step:
   1. If the element's text does not have the property small-caps, the currently selected font is retained and the browser goes to step 5.
   2. If the element's text has the property small-caps, then the browser looks for a small caps version of the currently selected font. For example, if the currently selected font is Arial Italic, the browser looks for Arial Italic Small Caps. This leaves two possibilities:
      1. The font family does not contain a small caps version of the currently selected font — the browser then simulates small caps by down scaling capital letters of the currently selected font. The browser then goes to step 5.
      2. The font family contains a small caps version of the currently selected font — the browser then selects the small caps version of the currently selected font. The browser then goes to step 5.
5. In this step, font-weight is checked:
   1. If the element's text has the font weight property set to normal, the currently selected font is retained and the browser goes to step 6.
   2. If the element's text has the font weight property set to anything other than normal, the browser looks for a matching weight in the font family. For example, if font-weight: 100; or if font-weight: bold;, the browser looks for a font in the font family of weight 100 or 700, respectively. Therefore, there are two possibilities:
      1. The element's text has the font weight set to lighter than normal ( 100,200, or 300) or 500:
         1. If the font family contains a version of the currently selected font of the required weight, the font is selected and the browser goes to step 6.
         2. If the font family does not contain a version of the currently selected font of the required weight, the browser chooses the normal version of the currently selected font and goes to step 6.
      2. The element's text has the font weight set to bold or 600, 700, 800 or 900:
         1. If the font family contains a version of the currently selected font of the required weight, the font is selected and the browser goes to step 6.
         2. If the font family does not contain a version of the currently selected font of the required weight, and if the font-family contains a bold version of the currently selected font, the browser chooses the bold version of the currently selected font and goes to step 6.
         3. If the font family does not contain a version of the currently selected font of the required weight, and if the font-family does not contains a bold version of the currently selected font, the browser simulates boldface by increasing the stroke width of the currently selected font and goes to step 6.
6. In this step, the selected font is scaled to the required font size.

Note 1: If the element contains a glyph that is not found in the first font family, the browser chooses the next specified font family (if any) or the browser's default fallback font. The browser then goes through the entire font matching process for that glyph only. However, Internet Explorer 6 does not follow this process, it displays an empty "box" character when a glyph is not available.

For example, if Comic Sans MS does not contain a particular mathematical symbol, then, to display that symbol only, the browser will use the next specified font in the CSS declaration that does contain the symbol (say Times New Roman). Therefore, Comic Sans MS will be used for all the element's text except for the mathematical symbol, which will use Times New Roman.