⚡️🎨 Matches the x-heights and widths of two fonts
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit b238627 Jun 14, 2018
Permalink
Failed to load latest commit information.
images
LICENSE Initial commit Nov 11, 2016
README.md s/font-height-matcher/font-style-matcher/g Nov 22, 2016
app.js Ignoring unwanted types Jun 13, 2018
index.html Adding font 'upload' Jun 12, 2018
manifest.json try to register sw Nov 22, 2016
style.css
sw.js bump version Jun 14, 2018

README.md

font-style-matcher

If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen.

This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths [1].

This tool helps you do exactly that.

fouc