Loading your own font files via CSS with @font-face can cause some problems. Font files can be big and add up to your HTTP requests and thus are slow to load. In the meantime certain browsers completely hide the text while waiting for a font, making the page unusable.
font-family: "My Cool Font", sans-serif;
This CSS will hide the affected text while loading “My Cool Font”, not show it in “sans-serif” as you might expect.
A solution provided by the source article is to lazy-load a CSS file pointing to the fonts, and overwrite the existing font declarations in there. So by default the text will show using a fallback font family, then whenever the fancy fonts are loaded they’ll replace the fallback.
Striving for originality, usability, simplicity and style — Frique builds jQuery and WordPress plugins and themes that make life a little easier. Frique cares and writes about web and software usability, performance, development workflow and desire for perfection.