Notes from building Tinkerfont

Use the left or right arrow keys on your keyboard to navigate between posts.

RandomGuestbookStatus

Feed url

Copied to clipboard

Notes from building Tinkerfont

Jun 29, 2026

Your browser does not support the video tag.

I'm a generalist. I design, I code, I end up in a lot of places where typography matters but isn't really the job. Reviewing a client's staging site. Onboarding to a codebase I didn't write. Wondering if a page would just read better in a different font face. The question comes up a lot: what's actually being used here, and what would it look like with something else?

DevTools gets you part of the way. But there wasn't a quick way to just try a font on the live page and move on, so Tinkerfont started as a small tool to close that gap.

What Tinkerfont does

Tinkerfont is a browser extension for inspecting, replacing, and testing fonts on live websites.

Inspect : right-click any text for family, weight, size, color, and contrast. Copy what you need.

Detect : open the panel and see every font family on the page, with counts.

Swap : search 1,900+ open fonts from Bunny Fonts, or upload your own .woff2, .woff, .ttf, or .otf. Apply in one click.

Scope : limit a swap to the nav, a hero, or any area you pick on the page.

Persist : rules save per hostname. Export and import your setup as JSON.

Free on Chrome and Firefox. No account. Everything stays in local storage on your device.

How the idea grew

The first version was really just font swapping -- pick what's on the page, try a candidate, scroll, decide. That alone covered most of what I kept doing on staging and client work: a quick gut check before a meeting, a screenshot to share, no branch and no CSS edit.

The inspector came later. I'd been using Fontanello for years and wanted that flow built in -- right-click, see the breakdown, copy a value. Huge thanks to Lars and Fredrik for the inspiration there.

A Firefox port followed once the Chrome version felt solid -- same panel, same rules, same local-first model. The website (mighil.com/tinkerfont) is a small lander and docs site: install links, a get-started guide, privacy policy, support form.

Dev notes

Nothing too clever under the hood.

The extension

Manifest V3 on Chrome -- service worker background, content scripts on , a floating panel injected as an iframe.

Roughly:

Piece<br>Job

content.js<br>Detects fonts, applies replacement rules, handles scoped areas, watches the DOM

bunny-font-loader.js<br>Fetches Bunny Font CSS and inlines faces as data URLs so swaps work on strict CSP sites

font-inspect.js<br>Right-click context menu — live typography under the cursor

storage.js<br>Per-hostname rules, areas, theme, custom font metadata — all chrome.storage.local

popup.js + panel.html<br>The UI — search, apply, export/import

When a page changes (SPAs, lazy-loaded content), a mutation observer re-applies active rules so swaps don't vanish after navigation.

Custom uploads stay local. The Bunny catalog is a bundled JSON file, refreshed with a small Node script whenever Bunny adds families.

The Firefox build shares almost all the same code -- a thin browser shim, a Firefox-specific manifest (gecko id, data collection declarations for AMO), and a few CSS tweaks where the panel layout differed.

The /tinkerfont website

Next.js, deployed on Cloudflare via OpenNext. Static inner pages, a support form with Turnstile. The landing page has interactive extension previews (HTML iframes), a demo video with a lazy-loaded poster for mobile, and the usual install CTAs for both browsers.

Try it

Chrome: Chrome Web Store

Firefox: Firefox Add-ons

If you use it for work, I'd love to hear what breaks or what's missing.

Tagged in<br>tech