Font style matcher
Minimize size difference between fallback fonts and webfonts
Font style matcher launched on November 9, 2017 with 7 votes, #1,398 of 3,137 launches that month. The site was still online in September 2026, 8 years on.
What it does
Font style matcher is a tool for matching the size of your fallback font the size of your webfont to avoid the jarring layout shift which happens when the webfont renders and replaces the fallback font.
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. 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 closefrom meowni.ca
Does a similar job
all alternatives →
Better Google Font Finder2017 · jmattthew.github.io · ▲347Sort & compare Google Fonts by their visual attributes.
Font Tester2024 · font-tester.foxcraft.tech · ▲280I've been looking for new fonts to use for a new project, but there weren't any great tools for seeing how a particular serif font for headers would look with another sans font for paragraph text, so I built a tool that lets you compare, adjust, and tinker with the way you'd use a font in your specific project before downloading it/setting it up. This is only using the free Google fonts for now. If there are other open-source fonts I should add, let me know and I'll add them!
- ADA designer friend and I made ffffallback.com for testing fallback fonts2011 · ffffallback.com · ▲56
What Font Is2019 · whatfontis.com · ▲353Find any font from any image (commercial or free)-WhatFontIs
More dev tools this month
the category →
Contribute to oosexgang/hackios-xnu-kernel development by creating an account on GitHub.
Dev tools · 2d ago · github.com
open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.
Dev tools · 30d ago · github.com
Contribute to reladraw/reladraw development by creating an account on GitHub.
Dev tools · 28d ago · github.com
OpenBot▲362Grok Bot alternative: free, local, open-source, multiplayer
Dev tools · 25d ago · openbot.run
Talanoa▲346Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…
Dev tools · 23d ago · talanoa.email
Source: Product Hunt launch ↗
Launched alongside, November 2017
the whole month →
First Search▲1,093The world's best startup advice, curated and searchable.
Growth · 2017 · review.firstround.com
Mockup Generator▲879Create attractive product screenshots with just a few clicks
Growth · 2017 · theapplaunchpad.com
Easy to build, custom landing pages for free
Growth · 2017 · login.mailchimp.com
