Web fonts performance - Bram Stein
- 60% of the pages use web fonts
- multiple fonts per page
- avg. 400kB of web fonts per page
- FOIT vs FOUT
- FOUT should be the default behavior
- font-display: auto, block, swap fallback, optional -block will hide text until the ont is loaded -swap fallback imminently and loads the font later -fallback is similar to swap but has a timeout. -optional show web font if the are cached (not available in browsers yet)
- lazy loading is bad (at least for web fonts)
- preload instructions
- in a link element
- as a http header
- preload is not available in browsers yet
- what we can do: use javascript
- CSS font loading api
- use ethe api to force de broswer load the font immediately
- add classes to your html font-loading, font-loaded, font-fails
body {
use sans-serif
}
.fonts-loaded body {
use webfont
}