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.

Fallback font

Font size: 16px Line height: 1 Font weight: 300 Letter spacing: 0px Word spacing: 0px Copy CSS to clipboard The fox jumped over the lazy dog, the scoundrel. Web font Download from Google Fonts , or: Upload font , or:

Font size: 16px Line height: 1 Font weight: 300 Letter spacing: 0px Word spacing: 0px Copy CSS to clipboard The fox jumped over the lazy dog, the scoundrel.

Overlapped

In the default example, Merriweather is taller and wider than Georgia, so if you bump Georgia's font size up to 18px, and its letter spacing to 0.1px you'll get a pretty close match!

Use different colours for each font

See layout shift due to FOUC

The fox jumped over the lazy dog, the scoundrel.



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. The fox jumped over the lazy dog, the scoundrel.



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

made with ✨ by monica. inspired by helen's blog post. find this on github