Responsive Web Design, Part 2 (2015)
Web Fonts Performance
CSS font-rendering Property
Browser vendors are currently trying to standardize and control font loading behavior with a new CSS property. The font-rendering property9, if accepted as a standard and implemented by the browser, will let you customize the font loading and rendering behavior.
The proposal describes three parameters that can be combined to implement any font loading approach. Font loading is said to be “blocking” if it blocks the page from rendering. If a font is replaced with another font, this is called a “swap.” An example of swapping is when a fallback font is replaced by a web font. Finally, a web font can be said to be “optional”: the font will be shown immediately if it is available; if not, the fallback font is shown indefinitely.
The font-rendering property accepts the same three parameters:
•block: block the rendering of the text while the font is loading, with an optional timeout;
•swap: use a fallback font and render the font if it becomes available, with an optional timeout;
•optional: show the font if it is available (for example, if it is cached) and otherwise the fallback font. Do not rerender the page, even if the web font becomes available.
The proposed font-rendering property is intended to be used as part of a @font-face rule.
@font-face {
font-family: My Font;
src: url(myfont.woff);
font-rendering: block;
}
It is also possible to customize the default behavior of both block and swap by specifying a timeout value in seconds. By combining block, swap and optional you can create any desired custom font rendering scheme.
@font-face {
font-family: My Font;
src: url(myfont.woff);
font-rendering: block 5s swap 3s;
}
This will block the rendering of the page for five seconds. If the web font loads within those five seconds it is used immediately. If it fails to load within five seconds, the fallback font is used instead. There is also a three-second grace period where the web font can still load and be swapped in. If the web font loads after the combined timeout of eight seconds (5s + 3s) it will not be swapped in and the fallback font will continue to be used. However, if the font loads after these eight seconds, it will be stored in the browser cache and used on the next request.
The font-rendering property lets you simulate the FOUT with a value of block 0s swap infinite, and the FOIT with a three-second timeout with block 3s swap infinite.
/* FOUT using the font-rendering property */
@font-face {
font-family: My Font;
src: url(myfont.woff);
font-rendering: block 0s swap infinite;
}
/* FOIT using the font-rendering property */
@font-face {
font-family: My Other Font;
src: url(myotherfont.woff);
font-rendering: block 3s swap infinite;
}
Unfortunately, at the time of writing, the property has not yet been implemented by any browser (nor accepted as a standard, and is likely to udnergo significant changes. In fact, at the time of this writing, browser vendors are considering renaming the properties and dropping support for configurable timeouts). Once the font-rendering property or something like it has been adopted, it will be a great way to control font loading and rendering without using JavaScript. Until then we need to rely on the CSS Font Loading API.