Tinkerfont

Product Introduction

1. Definition: Tinkerfont is a free, client-side browser extension (Chrome Extension and Firefox Add-on) designed for web typography prototyping and inspection. It operates directly within the browser's context, allowing for real-time manipulation of CSS font properties on live websites.
2. Core Value Proposition: It exists to enable designers, developers, and product managers to experiment with and test web fonts instantly on production or staging websites, eliminating the need for developer tools, code deployments, or design software. Its primary value is in accelerating the font selection and implementation workflow through direct, non-destructive page manipulation.

Main Features

1. Right-Click Font Inspector: This feature allows users to inspect the precise typographic CSS of any on-page text element via a right-click context menu. It extracts and displays computed values for font-family, font-size, font-weight, line-height, color, and contrast ratio. A key technical detail is its ability to generate and provide an experimental direct download URL for the detected font file when possible, facilitating asset acquisition.
2. Page-Wide Font Scan & Targeting: Tinkerfont performs a live DOM scan to audit and list every font-family in use on the current webpage, accompanied by usage counts. Users can then target a specific family for replacement or use a wildcard (*) selector to apply changes to all text nodes globally or within a scoped area, providing systematic control over font swaps.
3. Live Font Swapping with Bunny Fonts Integration: The extension integrates directly with the Bunny Fonts CDN, providing instant access to over 1,900 web-optimized fonts for testing. Technically, fonts are fetched and inlined as data: URLs, bypassing common CDN blocks and CORS restrictions. Swaps are applied via dynamically injected CSS @font-face rules and style overrides, rendering changes immediately without a page refresh.
4. Visual Scope Selector for Targeted Changes: Beyond global swaps, Tinkerfont includes a point-and-click element selector tool. This allows users to visually define specific areas (e.g., navigation, hero section, data tables) to constrain font changes. These "area scopes" are saved per hostname, enabling precise, component-level typography testing.
5. Persistent, Hostname-Specific Rule Storage: All font replacement rules and visual scopes are automatically saved to the browser's local storage (chrome.storage.local or browser.storage.local) keyed by the website's hostname. This ensures that applied changes persist across browser sessions and page reloads, creating a stable prototyping environment for ongoing projects.

Problems Solved

1. Pain Point: The inefficient workflow gap between selecting a font in a design tool (like Figma) and seeing it perform in the actual browser environment with real content, dynamic layouts, and responsive breakpoints. This often leads to post-deployment surprises regarding readability, performance, and visual hierarchy.
2. Target Audience: Front-end Developers needing to test font fallbacks and loading behavior; UI/UX Designers responsible for typographic systems who must validate designs on live code; Product Managers & Marketing Managers who approve visual changes and need to see accurate, interactive previews; Freelance Web Designers presenting font options to clients directly on their existing site.
3. Use Cases: A/B testing headline fonts on a marketing landing page; auditing and modernizing the typography on a legacy website; presenting a client with 3 potential brand typefaces applied directly to their live staging site; verifying that a purchased OTF font file renders correctly across all browsers before embedding it in the CSS build process.

Unique Advantages

1. Differentiation: Unlike browser DevTools which are temporary and require CSS knowledge, Tinkerfont offers a persistent, visual, and saved workflow. Compared to other font overlay extensions, its deep Bunny Fonts integration, robust inspection tool, and visual scoping mechanism provide a more comprehensive prototyping suite focused on real-world implementation.
2. Key Innovation: The combination of hostname-persistent storage for rules and the data: URL inlining technique for font delivery. This duo allows for a seamless, "install-and-forget" testing environment that works on many sites with strict Content Security Policies (CSP), a common hurdle for similar tools.

Frequently Asked Questions (FAQ)

1. Is Tinkerfont free and does it collect my browsing data? Yes, Tinkerfont is completely free to use. It follows a strict no-data-collection policy: it requires no account, does not transmit your browsing data or font choices to any server, and stores all your rules and uploaded fonts locally on your device using the browser's secure local storage API.
2. Can I use Tinkerfont to test my own custom or purchased font files? Absolutely. The extension supports uploading .woff2, .woff, .ttf, and .otf font files through its "Custom" tab. This is essential for testing proprietary brand fonts, client deliverables, or commercial typefaces in the live browser environment before finalizing the production stylesheet.
3. Do my font changes and settings save if I close the browser or revisit the site later? Yes. This is a core feature. All replacement rules and defined visual scopes are automatically saved per website hostname. When you return to the site days or weeks later, your previously configured font swaps will still be active, making it ideal for ongoing design iteration.
4. How does Tinkerfont handle websites that block external fonts or have strict security policies? The extension uses a technical workaround: it fetches fonts (like those from Bunny Fonts) and converts them into base64-encoded data: URLs, which are then injected directly into the page's styles. This method often bypasses restrictions on external CDNs, allowing swaps to work on many secured sites, though it cannot run on fully restricted pages like browser-internal URLs (e.g., chrome://).
5. Can I transfer my Tinkerfont setup and saved rules to another computer or browser? Yes, via the Export/Import function. You can export your rules as a JSON file from the panel header. Importing this file on another device will restore all Bunny Font rules instantly. For rules involving custom uploaded fonts, you will need to re-upload the font files on the new device, as the files themselves are stored locally.