The fastest way to inspect, replace, and test new fonts on live websites.

Try alternative typefaces on real websites before making changes in your stylesheet or opening Figma. See how fonts perform across real content, layouts, and breakpoints.

ChromeAdd to Chrome FirefoxAdd to Firefox

0:00

Inspect

Right-click
Credit
The right-click font inspector is inspired by Fontanello. Thank you to Lars Wästfelt & Fred Bergman for the original idea.
to inspect font specs

Open Tinkerfont in the context menu for live typography on any text. Click a value to copy it — family, color, contrast, or an experimental font file URL when available.

Scan

See every font on the page

Scan the live DOM and list what's actually in use — with counts. Tap a family to target it, or use * for everything.

Swap

Try 1,900+ fonts instantly

Search Bunny Fonts or upload your own. Apply on the page in one click — no DevTools, no deploy, no account.

Scope

Limit changes to one area

Pick elements on the page to scope a swap. Try a new face on the nav or table only — areas save per hostname.

Save

Rules stick per site

Keep your shortlist applied on staging while you iterate. Revisit a reference site days later with the same swaps in place.

Got questions?

What is Tinkerfont?

Tinkerfont is a Chrome extension and Firefox add-on for typography prototyping on the live web. Detect fonts on any page, swap them with candidates from Bunny Fonts or your own uploads, and see the result on real content, layout, and breakpoints before you touch CSS or design systems.

Is Tinkerfont free?

Yes. Tinkerfont is free to install and use. Optional supporter contributions help fund ongoing development, but every feature is available without payment.

Does Tinkerfont collect my data?

No. Tinkerfont does not require an account and does not send your browsing data to any Tinkerfont server — we do not operate any. Your font rules, area scopes, theme, and uploaded fonts are stored locally on your device (chrome.storage.local in Chrome, browser.storage.local in Firefox). See the privacy policy for details.

Does it work on sites with strict font policies?

Usually, yes. Bunny Fonts are fetched and inlined as data URLs, so replacements often work on pages that block external font CDNs. Some restricted pages — like the Chrome Web Store or chrome:// URLs — cannot run extensions at all.

Can I upload my own fonts?

Yes. Upload .woff2, .woff, .ttf, or .otf files in the Custom tab to test brand fonts, client deliverables, or purchased typefaces on a live page before they ship in your build.

Do my settings persist across visits?

Yes. Replacement rules and area scopes are saved per hostname in local storage, so your swaps stay in place when you refresh or come back later. Use Rescan in the panel to clear everything and start over.

Can I move my setup to another browser?

Yes. Use Export and Import in the panel header to back up your rules as JSON. Bunny Font rules work immediately after import; custom font rules need the font files re-uploaded on the new device. See Get started for a walkthrough.

Which browsers are supported?

Tinkerfont is available for Google Chrome and Mozilla Firefox. Chromium-based browsers that support Chrome extensions may work with the Chrome build, but Chrome and Firefox are what we test and ship for.

Come play with fonts, Danny!

Made for designers, developers, and tinkerers.