Zach’s ugly mug (his face)

Zach Leatherman

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

January 08, 2015

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’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like IndieWeb Avatar for https://jamstackconf.com/Jamstack Conf,btconf’s AvatarBeyond Tellerrand, IndieWeb Avatar for https://smashingconf.com/Smashing Conference,CSSConf’s AvatarCSSConf, and IndieWeb Avatar for https://www.whitehouse.govThe White House. He is an emeritus of IndieWeb Avatar for https://www.filamentgroup.comFilament Group, nejsconf’s AvatarNEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
Performance and Responsive Web Design (2015)
Next
In Case You Missed It: 2014
Webmentions
    Social Card Image Preview

    This is what will show up when you share this post on Social Media:

    How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)