Fonternate

Tracking since Apr 6, 2026.

Changelog

• Apr 6, 2026
  description

  Fonternate is a designer-friendly Chrome extension that gives you real-time control over typography on any website. Whether you're testing a custom font, comparing styles, or fine-tuning type settings, Fonternate lets you switch fonts, weights and advanced OpenType features instantly, all without touching your site's code.
  
  Key Features:
  • Font Family & Weight Selection: Enter any font family name (e.g., "Helvetica", "Inter", "Montserrat") and choose from weights 100–900 with ease.
  • Advanced OpenType Controls: Toggle ligatures (standard + discretionary), stylistic sets (ss01-ss20), swash levels, contextual alternates, and more.
  • Typography Fine-Tuning: When using Specific Styles, adjust tracking (letter-spacing), font size, and leading (line-height) with intuitive sliders that update in real-time — no Apply button needed.
  • Specific Styles Targeting: Apply font overrides to specific HTML elements (h1, h2, h3, p, span, div, etc.) for precise typographic control.
  • Live Preview on Any Page: Click the extension icon, apply the changes and see your font override immediately on the current page. Use "Previous" to switch back, or "Reset" to restore defaults.
  • Persistent Settings: Your preferences are saved locally so your overrides persist across sessions — no external tracking or analytics.
  • 100% Privacy-First: Fonternate does not collect or transmit any personal data. All settings stay on your device.
  
  Who it's for:
  If you're a designer, typographer, UI/UX professional, or simply someone who wants to test how fonts perform in real-world contexts, Fonternate offers a fast and flexible way to experiment.
  
  How to get started:
  1. Click the Fonternate icon in the Chrome toolbar.
  2. Enter the font family name you want to test.
  3. Choose a weight (100-900), toggle OpenType features as needed.
  4. (Optional) Enable "Specific Styles" to target specific elements and fine-tune tracking, size, and leading with real-time sliders.
  5 .Click APPLY to preview changes on the site.
  6. Use PREVIOUS to revert quickly or RESET to clear all overrides.
  
  Technical Highlights:
  Built with Manifest v3 for modern Chrome extension compliance.
  Designed with TypeScript + React + Tailwind CSS for fast, modular UI and clean code.
  Non-destructive injection: the original site styles remain untouched under the hood.
  
  Launch Notes & Support:
  If the font override doesn't appear immediately, make sure the font family name is spelled exactly as installed on your system. Also check your console for any injection issues.
  
  For updates, feature requests or bug reports, please visit the GitHub repository at https://github.com/yellow-type-foundry/fonternate
  Proudly made in 🇻🇳 Vietnam!

  Fonternate
  
  A designer-friendly Chrome extension that gives you real-time control over typography on any website.
  
  The toolbar is intentionally minimal: click Activate once to open the full experience. Your controls live in a pinned on-page panel (bottom-left) so you can tweak type while you scroll. Collapse it to a small button when you need it out of the way, expand it again when you don't, or press Escape to tuck it away.
  
  
  1. Key Features
  
  Activate / Disable from the toolbar — One click turns the in-page panel on or off. No cramped popup workflow.
  
  Pinned panel UI — Full font controls right in the page context, resize-friendly, with an optional Pin to page toggle that locks the layout while you work.
  
  Font family and weight — Use any installed font by name. Pick weights from 100 to 900, with detection-aware options when the font supports them.
  
  Preserve typesettings — Optionally keep the site's existing letter-spacing, size, and line-height so only the typeface (and mapped weights) changes.
  
  Advanced OpenType — Ligatures (standard and discretionary), stylistic sets, swash levels, contextual alternates, and more — scoped to what the active font actually supports.
  
  Specific styles — Target headings, paragraphs, or other elements so overrides apply exactly where you need them.
  
  Typography sliders — When not preserving typesettings, adjust tracking, size, and leading in real time.
  
  Live preview and local memory — Changes appear immediately. Settings persist locally — no analytics, no cloud sync.
  
  
  2. Who It's For
  
  Designers, typographers, and developers who want to audition fonts and OpenType features on real pages — not in a mockup — without touching site code.
  
  
  3. Getting Started
  
  a. Click the Fonternate icon and choose Activate (or Disable to turn it off).
  b. Use the pinned panel to enter a font name, set weight, and toggle features.
  c. Turn on Preserve typesettings if you only want to swap the face while keeping the site's spacing and sizing intact.
  d. Use Specific styles to limit changes to certain tags, and the sliders to fine-tune metrics.
  e. Use Previous / Reset in the panel to revert or clear overrides as needed.
  
  
  4. Technical Highlights
  
  Manifest V3. Built with TypeScript, React, and Tailwind. Fully non-destructive — overrides are applied as layered styles. Collapse the panel or disable the extension to stop.
  
  
  5. Notes and Support
  
  Font names must match how they're installed on your system. If a font doesn't apply, check the spelling and confirm it's available to the browser.
  
  For updates, feature requests, or bug reports: https://github.com/yellow-type-foundry/fonternate
  
  Proudly made in Vietnam!

• Apr 6, 2026
  short_description

  Override fonts on any webpage with locally installed fonts. Test typography with advanced OpenType features and weight selection.

  Toolbar: Activate. Pin the full panel for fonts, weights, OpenType, specific styles, sliders—optionally keep site metrics.

Permissions & access

Permissions

activeTabstorage

Host access

<all_urls>

Screenshots

Similar extensions

Alternatives to Fonternate, ranked by description similarity.

Google Fonts Preview

Test any Google Font to see how your website looks before you update your files.

116

TypeTaster

Preview and apply Google Fonts live on any website. Variable font sliders, element picker, and copy-ready CSS.

10

Font Finder

Easily identify and analyze fonts on any webpage. Get font family, size, weight, style, color, and more.

20

Font Detective

Hover over text to see font style, size, weight, and other typography details

5

FontSwap - World's best font swap extension

Swap webpage fonts with system or Google fonts. Minimalist, robust, powerful.

73

★ 3.0

Font Detector – What font is this?

Font Detector is a fast and free font finder tool that helps you identify any font on a webpage instantly. What font is used here?

473

★ 5.0

Typeface finder

Hover with typeface finder to look up fonts on any website. Find out typefaces fast including font and typeface details.

139

★ 4.7

Font Analyzer

Use Font Analyzer to analyze font type and style on any page. Website font identifier answering what font is this.

150

★ 5.0