Fonty - The Font Finder by Josh Debris

Fonty is the fastest, cleanest, and most elegant way to inspect typography on any website.

Designed specifically for web designers, developers, and typography lovers, Fonty gives you instant access to font families, sizes, weights, line heights, colors, and accessibility contrast ratios — all in a sleek, non-intrusive popup.

✨ KEY FEATURES:

🔍 Instant Typography Inspection
Hover over any element on the page to instantly view its font details. Lock the popup with a click or use your shortcut to explore freely.

📋 One-Click CSS & Tailwind Export
Copy full typography rules or single values with one click:
• Standard CSS: font-family, font-size, line-height, etc.
• Tailwind CSS: automatically formats classes like text-[18px], font-[600], leading-[1.4]

🎯 Precise Typography Details
• Font Family & primary font detection
• Computed Font-Size, Font-Weight, Line-Height & Letter-Spacing
• Text color swatch & hex code
• WCAG-compliant Contrast Ratio with instant readability badge

📜 Built-in Font History
Never lose a font you loved! Fonty keeps a clean history of your inspected fonts:
• Filter by favorites
• Search by font name or website domain
• Click individual property chips to copy just the value you need
• Sort by newest or oldest

🎨 Modern & Adaptive Design
• Beautiful glassmorphic UI with smooth micro-animations
• Supports System Default, Light Mode, and Dark Mode
• Complete CSS isolation via Shadow DOM — no website styles can break Fonty's UI

🔒 100% Private & Open
Fonty respects your privacy. Everything runs 100% locally in your browser:
• No tracking, no analytics, no external servers
• Zero data collection

⚡ KEYBOARD SHORTCUTS:
• Alt + Shift + F — Start / Toggle Fonty inspector
• Esc — Fast exit & close inspector anytime