FontSwap

About

FontSwap is the complete typography tool for designers and developers. Instantly identify every font on any webpage, discover free alternatives for premium fonts, and preview replacements live - without touching code.


FONT DETECTION

Click the FontSwap icon to scan any page. You'll see every font in use, with details like font family, weight, size, and color. Premium fonts are marked with an orange badge so you know which ones need licensing.

FontSwap uses canvas-based detection to identify the actual rendered font, not just what the CSS declares. This means accurate results even when fonts fall back to alternatives.


FREE ALTERNATIVES

Found a premium font you love but can't afford? FontSwap shows you similar free fonts from Google Fonts, ranked by visual similarity. Each alternative includes a direct link to Google Fonts where you can download it for free.

Our database covers 300+ premium fonts with curated alternatives, powered by FontAlternatives.com.


LIVE FONT SWAP

Don't just imagine how a replacement would look—see it live. Click "Replace" on any alternative and watch the page transform instantly. The font loads from Google Fonts CDN and applies to every element using the original font.

Changed your mind? Click "Undo" to revert. You can swap multiple fonts independently and experiment freely.


FONT INSPECTOR

Need to identify a specific element? Enter picker mode by clicking the crosshair icon. Hover over any text to see a tooltip with the font name. Click to capture full details including font-family, font-weight, font-size, line-height, letter-spacing, and color.

The inspector opens the side panel with complete CSS properties, ready to copy to your clipboard.


SIDE PANEL

FontSwap includes a persistent side panel that stays open while you browse. Switch between tabs, navigate pages, and the panel updates in real-time. Perfect for auditing an entire site without repeatedly opening the popup.

The side panel includes three views: Fonts (detected on current page), Bookmarks (your saved fonts), and detailed inspection results.


BOOKMARKS

Save fonts for later reference. Click the star icon on any font to bookmark it. Your bookmarks persist across sessions and include:

- Font name and whether it's premium
- Snapshot of available alternatives
- Timestamps for when you saved it

Access your bookmarks anytime from the Bookmarks tab. Each saved font links directly to FontAlternatives.com for more details.


HIGHLIGHT MODE

Visualize where a font is used on the page. Click the eye icon next to any font to highlight all elements using it. Orange outlines appear around every matching element. Click again to clear.

The highlight button shows the element count, so you know exactly how many places use each font.


RIGHT-CLICK INSPECT

Right-click any text on a page and select "Inspect Font" from the context menu. A toast notification shows the detected font name, and opening FontSwap will display the full details.


EXPORT REPORTS

Share your findings in three formats:

- Markdown: Readable report with font list, usage roles, and alternatives
- JSON: Complete data export for developers
- CSS: Font-family stacks with recommended fallbacks

Reports include the page URL, scan date, and all detected fonts with their details.


WCAG ACCESSIBILITY AUDIT

Check text contrast for accessibility compliance. FontSwap scans every text element and checks against WCAG AA standards (4.5:1 for normal text, 3:1 for large text).

Results show as PASS, PARTIAL, or FAIL with element counts. Expand the details to see which fonts have contrast issues and the specific contrast ratios.


PERFORMANCE AUDIT

See how fonts impact page load. FontSwap analyzes font resources including file count, total size in bytes, and load times. Each font file is matched to DOM usage and marked as:

- Used: Font is actively rendering text
- Flagged: Potential issue detected
- Unverified: Could not match to DOM elements


PROVIDER DETECTION

Know where fonts come from. FontSwap identifies the font provider for each detected font:

- Google Fonts
- Adobe Fonts (Typekit)
- Monotype
- Bunny Fonts (privacy-focused)
- Fontshare (free)
- Self-hosted

Self-hosted premium fonts show a license risk indicator, helping you spot potential compliance issues.


DARK MODE

FontSwap respects your system preference and includes a manual toggle. Both popup and side panel support light and dark themes.


DATA SYNC

The font database updates automatically every 24 hours from FontAlternatives.com. You can also trigger a manual sync by clicking the sync chip. If offline, FontSwap falls back to the embedded database of 300+ fonts.


PRIVACY FIRST

FontSwap does not collect any personal data. All font detection happens locally in your browser. No tracking, no analytics, no accounts required.

The only network requests are:
- Google Fonts CDN: To load replacement fonts when you preview alternatives
- FontAlternatives.com API: To fetch updated font data (anonymous, no user data sent)


PERFECT FOR

- Web designers exploring typography options
- Developers identifying fonts for implementation
- Marketers analyzing competitor websites
- Students finding affordable font alternatives
- Accessibility auditors checking WCAG compliance
- Anyone curious about the fonts websites use


HOW TO USE

1. Visit any webpage
2. Click the FontSwap icon in your toolbar
3. See all fonts detected on the page
4. Click any premium font to see free alternatives
5. Click "Replace" to preview a swap live
6. Bookmark fonts you want to remember
7. Export reports to share your findings


SUPPORTED BROWSERS

FontSwap works on Chrome and Chromium-based browsers (Edge, Brave, Arc, Opera). Firefox version coming soon.


OPEN SOURCE

FontSwap is built by FontAlternatives.com, the free resource for finding Google Fonts alternatives to premium typefaces.


FEEDBACK

Found a bug or have a feature request? Visit FontAlternatives.com to get in touch.