3 ms·
That behavior is something that site owners can choose to enable with some asynchronous font loaders, not browser specific. For example, TypeKit adds a .wf-loa
by Encosia 13y ago
That behavior is something that site owners can choose to enable with some asynchronous font loaders, not browser specific.
For example, TypeKit adds a .wf-loading class to the <html> element immediately, begins loading the font asynchronously so as not to block page rendering, and then removes that class once the font has loaded. So, if you're loading a TypeKit font for your H2 elements, you could use CSS like .wf-loading h2 { visibility: hidden; } to hide those headings until their font is available.
If you don't take advantage of the loading class, that's when you see a basic font at first and then see a visible change from the basic font to a web font.
Unfortunately, the only way to avoid either outcome is to load the font synchronously in the head of the page, which blocks the page from loading or rendering further until the font loads and is generally unacceptable for most sites.