Font Explorer
Discover and identify fonts on any webpage with this comprehensive typography tool from DevTools Suite. Inspect font properties, view font stacks, and apply fonts in real-time.
Complete Typography Inspection & Discovery
Font Explorer helps you understand and work with typography on any website. Click any element to see its complete font information, scan entire pages for font inventory, identify font sources (Google, Adobe, system), and even apply different fonts to see how they look - all in real-time.
Key Features
Everything you need to explore and work with web typography
Interactive Element Picker
Click on any element to instantly detect and inspect its typography. See font family, size, weight, line height, letter spacing, and style with real-time visual highlighting.
Complete Font Stack Display
View the entire CSS font-family stack with all fallback fonts. See which font in the stack is actually being rendered and understand the fallback chain.
Font Source Detection
Automatically identifies font origins: Google Fonts, Adobe Fonts (Typekit), system fonts, web-safe fonts, custom @font-face, and generic families with color-coded badges.
Page-Wide Font Scanner
Scan the entire page to catalog all unique fonts in use. See element count, available weights and sizes, and font source for each typeface on the page.
Typography Metrics
Get complete CSS typography properties including font-size, font-weight, line-height, letter-spacing, font-style, and text-transform for any selected element.
Live Font Application
Apply different fonts to the page in real-time. Test web-safe fonts or browse 1000+ Google Fonts with lazy-loaded previews to see how they look before implementing.
Font Favorites
Save frequently used fonts as favorites for quick access. Build a personal library of go-to typefaces that match your design style and project requirements.
Font Search & Filtering
Search by font name and filter by category (sans-serif, serif, monospace, display, handwriting) to quickly find the perfect typeface from the Google Fonts library.
Multiple Application Scopes
Apply fonts to the entire page, specific element types (headings, paragraphs, links), custom CSS selectors, or individual selected elements for precise testing.
Font Loading Verification
Uses the Font Loading API to verify that fonts are actually loaded and available. Know for certain which fonts are rendering on the page.
Dual Mode Interface
Switch between Picker mode for inspecting individual elements and Scanner mode for cataloging all fonts on the page. Two workflows for different needs.
Visual Highlighting
Blue highlight on hover, green highlight on selection. Clear visual feedback makes it easy to identify which element you're inspecting or have selected.
Instant Identification
Click any text to immediately see its font family, weight, size, and source.
1000+ Google Fonts
Browse and apply fonts from the entire Google Fonts library with live preview.
Source Detection
Know if fonts come from Google, Adobe, system, or custom @font-face rules.