Media
5 items
Description
Identify fonts on any site, highlight usage, and swap to free alternatives. 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.