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

Zach is a builder for the web with Netlify. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with 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