Tinkerfont is a free Chrome Extension and Firefox Add-on for designers, developers, and tinkerers who want to experiment with fonts on real websites -- without opening DevTools, touching the design system, or editing a stylesheet.
I built Tinkerfont because I got tired of guessing what fonts would look like before changing code or design.
So I made something that lets you open a website, swap fonts instantly, and see the results in context. You can scroll around, test different sections, and even save screenshots before deciding if a change is worth making.
A few things worth trying:
- Right-click any text to see what font the page is actually using. - Open the panel, pick an element, search Bunny Fonts, and apply one with a click. - Use Pick Area if you only want to change the nav, a hero section, or another specific part of the page. - Your changes stick when you come back, so you don't have to start over every time.
The font inspector was inspired by Fontanello. I already had the font swapping working, but I really liked how Fontanello exposed font information, so I built something similar into Tinkerfont.
It's totally free on Chrome and Firefox. If you give it a try, I'd really love to hear what you think. Whether something feels missing, confusing, or completely breaks on a site you use, that feedback is incredibly helpful.
Nice. Does it only support Google Fonts, or can you use custom fonts as well?
The "changes stick when you come back" persistence is the part I'd lean on most — swapping a nav or hero font, then re-checking it days later without redoing setup. Where do those saved overrides actually live: local storage keyed per-domain, or synced through an account somewhere? And since Bunny fonts get inlined as data URLs, does the extension read or send any of the page content it touches, or is everything computed in-page?
The live-on-any-site angle is the part I'd actually use, testing type before committing it in the real CSS. Does it let me save a set of font plus size/spacing tweaks to reapply on the next visit, or is each session one-off? And can I export the final CSS to drop straight into the site?
Nice idea. Can the font changes be exported as CSS once you've found the combination you like? Congrats on the launch!
Browser extensions that inject styles into live pages tend to break on sites with strict CSP headers or shadow DOM components. How much of the modern web does this actually work on cleanly, or are there entire categories of sites, like ones built with web components, where this just won't apply fonts properly?
About Tinkerfont on Product Hunt
“Free font playground for live websites”
Tinkerfont launched on Product Hunt on June 30th, 2026 and earned 143 upvotes and 11 comments, placing #10 on the daily leaderboard. Tinkerfont is a free Chrome Extension and Firefox Add-on for designers, developers, and tinkerers who want to experiment with fonts on real websites -- without opening DevTools, touching the design system, or editing a stylesheet.
Tinkerfont was featured in Browser Extensions (5.4k followers) and Chrome Extensions (52.7k followers) on Product Hunt. Together, these topics include over 16k products, making this a competitive space to launch in.
Who hunted Tinkerfont?
Tinkerfont was hunted by Mighil. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how Tinkerfont stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Mighil
Hey Product Hunt,
I built Tinkerfont because I got tired of guessing what fonts would look like before changing code or design.
So I made something that lets you open a website, swap fonts instantly, and see the results in context. You can scroll around, test different sections, and even save screenshots before deciding if a change is worth making.
A few things worth trying:
- Right-click any text to see what font the page is actually using.
- Open the panel, pick an element, search Bunny Fonts, and apply one with a click.
- Use Pick Area if you only want to change the nav, a hero section, or another specific part of the page.
- Your changes stick when you come back, so you don't have to start over every time.
The font inspector was inspired by Fontanello. I already had the font swapping working, but I really liked how Fontanello exposed font information, so I built something similar into Tinkerfont.
It's totally free on Chrome and Firefox. If you give it a try, I'd really love to hear what you think. Whether something feels missing, confusing, or completely breaks on a site you use, that feedback is incredibly helpful.
Thanks for checking it out.