Zach’s ugly mug (his face) Zach Leatherman

faux-pas, Detecting Faux Web Font Rendering

December 13, 2016

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

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

Zach Leatherman IndieWeb Avatar for a builder for the web and the creator/maintainer of 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 81 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

Shamelessly plug your related post

These are webmentions via the IndieWeb and

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)