Launched this week
Tinkerfont
Free font playground for live websites
135 followers
Free font playground for live websites
135 followers
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
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.
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?
Tinkerfont
Where it lives: Everything stays local on your device, keyed per hostname (chrome.storage.local in Chrome, browser.storage.local in Firefox). No account, no cloud sync. Come back to staging.example.com next week and your nav/hero rules should still be there. If you want the same setup on another browser, use Export/Import in the panel -- that's a JSON file you download, not something uploaded to us.
What leaves your machine: Bunny fonts are fetched from Bunny's CDN by the extension, then inlined as data URLs so they work on strict CSP sites. Tinkerfont doesn’' run a backend that receives your browsing data or page content. Font detection and swaps are computed in the page by the extension locally -- we’re reading computed styles and DOM selectors to apply your rules, not sending that anywhere.
Local-only with export/import as a plain JSON download is exactly the model I want here — no account is a feature, not a gap. The one path that still leaves the machine is the Bunny CDN font fetch: does that request carry the page's hostname or a referer, so Bunny could passively see which sites I'm restyling, or is the font pulled with nothing tying it to the active tab?
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?
Tinkerfont
CSP: Most sites are fine. We don’t load fonts from external CDNs on the page - Bunny fonts get inlined as data URLs, which is why strict sites usually still work.
Shadow DOM / web components: We don’t go inside shadow roots. If text lives in a closed web component, a swap might not reach it. If font-family inherits from outside, you might still see a change.
In practice: Marketing sites, blogs, staging builds, most SaaS UIs, works great.
@jotzilla Inlining fonts as data URLs is a cleaner approach than I expected, makes sense that it gets around most CDN-based CSP restrictions.
Voquill
Nice idea. Can the font changes be exported as CSS once you've found the combination you like? Congrats on the launch!
Tinkerfont
Right now, it only allows you to explore the entire workflow. A more granular approach is something I'd consider, and I can implement it in the next build. Thanks for the suggestion!
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. Does it only support Google Fonts, or can you use custom fonts as well?