How do browsers process the @font-face src descriptor list
Posted on
You may have come across the src descriptor of the @font-face CSS rule and
wonder how is this actually processed by the browser.
Sure there is something about the font's extension and/or the format hint, but
what if the browser does support many of the multiple font type listed?
To answer this question I will just quote the W3C recommendations website:
Its value is a prioritized, comma-separated list of external references or locally-installed font face names. When a font is needed the user agent iterates over the set of references listed, using the first one it can successfully activate. Fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the list.
Hence quote on format hints:
The format hint contains a comma-separated list of format strings that denote well-known font formats. Conformant user agents must skip downloading a font resource if the format hints indicate only unsupported or unknown font formats. If no format hints are supplied, the user agent should download the font resource.
/* Load WOFF2 font if possible, otherwise WOFF, else use OpenType font */
@font-face {
font-family: bodytext;
src: url(ideal-sans-serif.woff2) format("woff2"),
url(good-sans-serif.woff) format("woff"),
url(basic-sans-serif.ttf) format("opentype");
}