How we use web fonts responsibly, or, avoiding a @font-face-palm

Filament group publishes another best practice. Which of course, is a Must Read. This one is about using web fonts.

Using @font-face to load custom web fonts is a great feature to give our sites a unique and memorable aesthetic. However, when you use custom fonts on the web using standard techniques, they can slow down page load speed and hamper performance—both real and perceived. Luckily, we've figured out some methods to apply them carefully to ensure your site correctly balances usability, performance and style.

Even when the fonts do load correctly, custom fonts slow down the perceived speed of a site significantly because a page full of invisible text isn't exactly usable. Sure, once the first page is visited, the custom fonts are cached and display quickly, but perceived speed for the first page view is critical. If we can't paint a usable page within a few seconds, a lot of visitors will drop off.