A script to highlight elements that are mismatched incorrectly to @font-face blocks, which may result in shoddy faux bold or faux italic rendering. Works standalone—no dependencies.
Want this on the command line? Check out
A more comprehensive test page is also available.
When you include a CSS
@font-face block on your page, you specify a
font-style inside that block. When you use a web font, you specify those same properties on elements on your page. While you need to match the value of
font-family exactly to use the web font,
font-style do not require exact matching. This can lead to unexpected behavior as the browser uses what is available, even if it’s not a good match.
Further, if your element wants a
font-weight less than or equal to
500 but your
@font-face block has only variants of your typeface that are bold, the browser will attempt to synthesize a bold web font for you. This synthesized rendering is often sub-par. The same synthesis happens when you want italic, but no italic web font is available. This behavior could be controlled with the
font-synthesis property if browsers supported it.
faux-pas helps you by logging and reporting these mismatches and faux renderings so that you can fix the offending code.
Available on npm as
npm install --save-dev fg-faux-pas
faux-pas.init.js(tip: use your own init file to change configuration options).
console: true: uses
consoleto output full logging information (warnings for mismatched elements and errors for faux rendering).
highlights: true: adds a specific style to mismatched/faux elements on the page for visual inspection.
mismatches: true: a mismatch may not be a faux rendering even though it’s a misconfiguration—this option allows you to disable these warnings.
Anything that supports the CSS Font Loading API:
gulp to generate a new docs HTML file (automatically updates the bookmarklet with the latest code).