Zach’s ugly mug (his face)

Zach Leatherman

faux-pas, Detecting Faux Web Font Rendering

December 13, 2016 Tagged: Project

From deep in the archives (4 years late!), filed under “things I built but never posted on my web site”:

When a browser uses a web font but doesn’t have an italic or bold variation available, it will attempt to fake it! This is also known as font-synthesis. For some people (including me) this can be hard to detect visually.

faux-pas is a project to help detect this behavior so that you can fix it!

  • npm install fg-faux-pas and include the script in your build. Or use the Bookmarklet!
  • Demo (includes the Bookmarklet!) and Test Page
  • View on: GitHub or npm
  • Retweet

node-faux-pas is a project to run faux-pas on the command line:

  • npm install -g node-faux-pas
  • e.g. fauxpas
  • View on GitHub or npm
  • Retweet
Zach’s ugly mug (his face)

Zach is a builder for the web at IndieWeb Avatar for He created IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 69 talks in nine different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Read more about Zach »

No @font-face Syntax will ever be Bulletproof, Nor Should It Be.
Lazy Loading Web Fonts Is Probably Not What You Want

Shamelessly plug your related post:

Sharing on social media?

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)