CSS Font Loading
CSS Font Loading API
Marco Hengstenberg commented
As I posted on Twitter today, I'd love to see this supported by MS Edge. https://twitter.com/nice2meatu/status/932962417746857984
This is hugely important for font loading, independent of `font-display` or `preload` support. This is traditionally the supported method for grouping web font repaints (to alleviate FOIT race conditions) in all other browsers and may even soon be a cut-the-mustard for advanced web font loading techniques moving forward.
Craig Kovatch commented
WebKit has started implementing this. IE will be the only browser without it. This is two years old now -- can we get an official comment?
Font Loading API is a *slow* way to load fonts early. There are two faster options:
- HTTP/2 push, or
- Link rel=preload (which can be even in HTTP headers, so the browser can start preloading before parsing the document, way before JS runs)
It's solves the most common problems Font Loading API was meant for, but with 1 line of CSS.
Neil Bhay commented
Other useful links on the benefits of Edge implementing this:
and where the rest of the browser world stands on supporting this:
Chris Rebert commented
Cymen Vig commented
There are a lot of hacky work arounds to determine when a web font has loaded. The native support would be great as it works much better than the hacks (at least with Chrome which now has native FontFace).
I just lost 2 days of work to find out that IE does not like @font-face in conjuncton with ssl and pragma=no-cache. Just fix this before you start doing any new mess with css fonts!
Kenji Baheux commented
A few benefits of this API:
- you can start the download of web font at a much earlier point than the browser would leading to significant improvements to page load latency as perceived by users
- you finally have a solid way to know if a particular font has been loaded and can therefore design beautiful user experiences (e.g. wait for web fonts for up to 1 second then fallback to local fonts, don't wait at all for web fonts use them if they are "readily" available)