Get started with Tinkerfont

Add Tinkerfont from the Chrome Web Store or Firefox Add-ons, then pin it from your browser's extensions menu so the toolbar icon is easy to reach.

1. Click Add to Chrome or Add to Firefox and confirm the install.
2. Open any normal website — not internal browser pages (chrome://, about:) or extension store sites.
3. Refresh the tab once after installing so the latest scripts load.

Move your mouse over the text you want to inspect, then right-click and open Tinkerfont in the context menu. The submenu updates live as you hover — family, weight, size, color, contrast, and more.

1. Hover the text you care about before right-clicking.
2. Open Tinkerfont → read the values in the submenu.
3. Click any row to copy it. Font file (experimental) copies the full https URL when found; the menu shows the filename only.
4. The first copy may ask for clipboard permission once.

Click the Tinkerfont toolbar icon on the page you want to preview. The panel slides in from the side so you can search fonts without leaving the site.

1. Navigate to the page you want to test — staging, production, or local.
2. Click the Tinkerfont icon in Chrome’s toolbar.
3. Use the theme toggle in the panel header if you prefer light or dark UI.

Under Fonts on this page, Tinkerfont scans the live DOM and lists families in use with element counts.

1. Tap a detected font to set it as the target.
2. Or type a family name in Target font — use * to replace every font on the page.
3. Hit Rescan to clear applied rules and refresh the font list.

Choose Bunny Fonts to search 1,900+ open fonts, or switch to Custom to upload your own files.

1. Search the Bunny catalog and pick a candidate.
2. Or upload .woff2, .woff, .ttf, or .otf under Custom, name it, and save.
3. Click Apply replacement to preview the swap on the live page.
4. Scroll the page and check headings, body copy, tables, and UI chrome.

Optional, but useful when you only want to change the nav, a table, or a hero — not the entire site.

1. Click Pick area, then click elements on the page to build a selector.
2. Press Esc to cancel picking. Use Clear all areas to remove scopes.
3. Areas are saved per hostname and persist across refreshes.

Active rules show what’s applied on the current site. Remove individual rules from the list, or export your full setup to move it to another browser.

1. Review Active rules to see source → replacement pairs for this hostname.
2. Click Remove on a rule to delete it.
3. Use Export in the panel header to download a JSON backup.
4. Use Import on another machine to restore rules and scopes. Re-upload custom font files after import.