You can get some ugly scenarios like FOUT (Flash of Unstyled Text) or FOIT (Flash of Invisible Text). This is the point before the browser has fully loaded the font, and it either displays your backup system default font so the text has no styling, or it waits for the font to finish downloading before displaying anything.
With FOIT in particular, if you are thinking about the critical rendering path, you may have already discovered a problem.
If we wait for the font to fully download before displaying it to the user, the perceived load time will increase significantly because the user will see an almost blank page until the load is complete.
With FOUT, displaying unstyled text isn't great either, but at least the user sees something! By default, each browser chooses between FOUT or FOIT, and here are the differences:
Firefox can hide text for up to three seconds. It then uses ecuador mobile database the system font until it's ready.
Edge uses a system and then swaps out fonts when custom fonts are ready.
Safari hides all text on the page until the custom font is ready.
Thankfully, there are ways to change the default behavior and optimize your web fonts as you go.
A great guide on how to optimize web fonts can be found here . But to summarize what you should do:
Take advantage of the font-display property and set it to swap. This instructs the browser to display the unstyled font immediately, improving the critical rendering path. Read more here .
In the <head> at the top of your page, preload your fonts . This tells the browser to start loading the fonts immediately, reducing the time your users see unstyled fonts.