Right-click font inspection
Open the extension from the page context menu to inspect live typography details such as family, weight, size, color, contrast, and available font file information.
Tinkerfont
Tinkerfont is a browser extension for inspecting and testing fonts on live websites in Chrome and Firefox. Swap typefaces with Bunny Fonts or custom uploads, scope changes, and save per-site rules.
Overview
Tinkerfont is a browser extension and add-on for testing typography on live websites. It is built for inspecting fonts, replacing them with alternatives, and checking how they behave on real content, layouts, and breakpoints before changing a stylesheet or design system.
The product works in Chrome and Firefox and is aimed at people who want to evaluate font choices in context. It supports right-click font inspection, DOM scanning, Bunny Fonts search, custom font uploads, element scoping, and per-hostname persistence so a testing setup can be revisited later.
Features
Live font detection
Scan the live DOM to see which families are actually in use on the page, including counts, then target one family or replace all fonts with a wildcard.
One-click font swapping
Search Bunny Fonts or upload custom font files, then preview replacements on the current page without editing CSS or deploying code.
Area scoping
Pick specific elements to limit a font change to part of a page, such as a nav, table, or hero section, instead of affecting the whole site.
Per-site saved rules
Store replacement rules and scopes per hostname so a site keeps the same preview setup across refreshes and later visits.
Export and import setup
Back up rules as JSON and restore them on another browser; custom fonts must be uploaded again after import.
Common use cases
Typography review on live content
Compare a replacement font against an actual article, landing page, or interface rather than a mockup, so spacing, hierarchy, and readability are tested in context.
Pre-implementation font testing
Preview a shortlist of candidate typefaces on a staging or production page before making changes in CSS, reducing the need to jump between design tools and code.
Scoped section testing
Limit a font experiment to a nav, hero, table, or other page section when you only want to assess one area at a time.
Live font auditing
Inspect page fonts, copy values from the context menu, and use the live results to understand what a site is currently using before making adjustments.
Browser-to-browser setup transfer
Move an established set of font rules to another browser or device by exporting the configuration and importing it elsewhere.
Pros and Cons
Pros
- Works directly on live pages, so you can judge type choices against real content and layout.
- Supports both Bunny Fonts and uploaded font files, giving you a choice between catalog search and custom typefaces.
- Can scope changes to a single area of a page instead of applying one replacement globally.
- Saves rules per hostname, which helps when revisiting the same site or staging environment.
- Includes export and import for moving setups between browsers.
Cons
- The source does not show pricing tiers or any paid plan details beyond noting the product is free to use.
- Some pages cannot be tested, including restricted browser pages such as chrome:// URLs and the Chrome Web Store.
- Custom fonts can be exported and imported as rules, but the font files themselves need to be re-uploaded on a new device after import.
FAQ
What is Tinkerfont used for?
Tinkerfont is a browser extension for typography prototyping on live websites. It lets you inspect fonts on a page, swap them with alternatives from Bunny Fonts or your own uploads, and review the result on real content before changing CSS.
Is Tinkerfont free?
Yes. The page says Tinkerfont is free to install and use, and that optional supporter contributions help fund development. The available source does not mention paid plans or usage limits.
Which browsers does Tinkerfont support?
Tinkerfont is available for Google Chrome and Mozilla Firefox. The site also notes that Chromium-based browsers that support Chrome extensions may work with the Chrome build, but Chrome and Firefox are the supported browsers it tests and ships for.
Can I test my own fonts in Tinkerfont?
You can upload .woff2, .woff, .ttf, or .otf files in the Custom tab. The extension also supports searching Bunny Fonts and applying replacements directly on the page.
Can I keep or transfer my font setup?
Yes. Replacement rules and area scopes are saved per hostname in local storage, and the extension includes Export and Import actions in the panel header so you can move a setup to another browser.
Quick Facts
- Category
- Browser extension
- Platforms
- Google Chrome, Mozilla Firefox
- Primary use
- Font inspection and typography prototyping on live websites
- Source domain
- mighil.com
- Font sources
- Bunny Fonts and custom uploads
- Storage
- Local storage per hostname
Tinkerfont Alternatives
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repos and verifies changes with compilers, debuggers, sanitizers, and tests.
Manta AI
Manta AI is an autonomous web app testing tool that maps app behavior, catches regressions, and generates tests from a URL, no scripts or selectors needed.
FixMyCWV
FixMyCWV is a web-based Core Web Vitals audit tool with developer-focused recommendations for LCP, INP, and CLS across many site stacks, including protected sites.
PromptLayer
PromptLayer is an LLM operations platform for versioning, testing, and monitoring prompts and agents. It helps AI teams collaborate on prompt workflows without code.
Evidently AI
Evidently AI is an open-source platform for evaluating and monitoring LLMs, RAG systems, AI agents, and predictive ML models with tests, synthetic data, and metrics.
TestSprite
TestSprite is an AI testing agent and automation platform for software teams to plan, generate, run, debug, and report tests with minimal input.