Zach’s ugly mug (his face) Zach Leat­herman

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

Read How we use web fonts responsibly, or, avoiding a @font-face-palm on the Filament Group Lab.

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.

Zach Leatherman is a builder for the web at Font Awesome and the creator of Build Awesome (née Eleventy/11ty), an award-winning open source website generator. He measures website performance with speedlify and at one point became too fixated on web fonts. He has given 86 talks in nine different countries at events like Beyond Tellerrand, State of the Browser, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Learn more about Zach »