@ Font-face browser control
When using @ font-face in css, the browser loads the text of my page in front of the font, which causes the font to transition from one style to another (Arial to myfont). For example, when using condensed fonts, the problem is very visual.
I only want to display one font, which I selected using @ font-face. What's the best way to do this?
source to share
He called FOUT the best way to handle this in my experience using the google font downloader:
https://developers.google.com/webfonts/docs/webfont_loader
Basically, you usually have to load the page (during which the body is hidden or the styled font blocks are hidden, your choice), as soon as they are loaded, a class is added to the body of the page, this causes the stylish fonts to be displayed.
The script adds these classes so you can style accordingly:
.wf-inactive - failed to load
.wf-loading - during load
.wf-active - loaded fine
The only downfall is that it requires Javascript ..
source to share
This is called Flash Unstyled Text and, as you mentioned, involves loading the font files in tandem with the rest of the page, the text of which will be styled to default or backward fonts until the new font is loaded and can be applied.
It seems that the best way to minimize this effect is to minimize the time it takes for the client to load custom fonts. Two measures you can take to do this are compressing the font files via gZip, and specifying the font files to be cached long-term by the viewer browser for later far-end views expire in the header .
If the FOUT is still pretty sharp for your users, you can specify a similarly shaped font that is likely to be installed on most machines for viewers as a fallback to keep your page size relatively consistent with the custom font loading. For example, for your condensed font, most viewers already have Impact as an available font, or Arial Narrow, both of which adhere to the “condensed” style.
And if all else fails, you can always create the entire text of your document with color: rgba(0,0,0,0)
and use JavaScript to remove that rule at the end of the timer.
source to share