Font Inspector Pro — Typography Analysis Tool

Chrome Extension for Typography Enthusiasts

Font Inspector Pro is a privacy-focused Chrome extension designed for designers, developers, and typography enthusiasts. It enables instant font identification on any website through an intuitive hover-to-inspect interface, complete with font pairing suggestions and multi-format export capabilities.

Table of Contents

• Getting Started
• Features
• How to Use
  • Starting the Inspector
  • Hovering to Inspect
  • Listing All Fonts
  • Font Pairing Suggestions
  • Exporting Reports
  • Copying CSS
• Understanding Font Properties
• Export Formats
• Technical Details
• Tips & Best Practices

Getting Started

1. Install from the Chrome Web Store
2. Click the Font Inspector Pro icon in your toolbar
3. Click "Start Inspecting"
4. Hover over any text on the page

That's it! You're now inspecting fonts.

Features

How to Use

Starting the Inspector

1. Click the extension icon in your Chrome toolbar
2. Click "Start Inspecting" — the large teal button
3. A floating tooltip will appear, following your cursor
4. Press ESC or click "Stop" to exit inspection mode

Hovering to Inspect

When inspection mode is active, hover over any text element to see:

The tooltip also shows the element selector (e.g., <h1.hero-title>) for easy identification in DevTools.

Listing All Fonts

Get a complete inventory of fonts on the page:

1. Click "List All Fonts" (📋 icon) in the popup
2. A panel displays all unique fonts found
3. Fonts are sorted by usage count (most used first)
4. Each font shows:
   • Font name
   • Number of elements using it
   • Category badge (serif, sans-serif, monospace, etc.)

Actions available for each font:

Font Pairing Suggestions

Get typography recommendations based on the fonts found:

1. Click "Font Pairings" (💑 icon) in the popup
2. The panel shows the top 5 fonts from the page
3. Each font includes 4 pairing suggestions with:
   • Suggested font name
   • Role (heading or body)
   • Reasoning for the pairing

Example Pairing

The database includes 30+ popular fonts with curated pairings based on typography best practices.

Exporting Reports

Export your findings in multiple formats:

1. Click "Export Report" (📊 icon) in the popup
2. Choose your format:
   • JSON — Structured data for developers
   • CSV — Spreadsheet-friendly format
   • HTML — Beautiful standalone report
   • Markdown — Documentation-ready format
3. Click the format button to download

All exports include:

• Page URL and timestamp
• Font count summary
• Complete font details
• Category breakdown

Copying CSS

Copy the complete CSS for any font:

1. From the tooltip: Click the copy icon next to the font family
2. From the font list: Click the 📋 button on any font

Copied CSS example:

font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
color: #1a1a2e;

Understanding Font Properties

Font Weight Scale

Font Categories

Font Inspector Pro automatically detects these categories:

Export Formats

JSON Export

{
  "meta": {
    "url": "https://example.com",
    "date": "2026-01-17T10:30:00Z",
    "generator": "Font Inspector Pro v2.0"
  },
  "summary": {
    "totalFonts": 5,
    "categories": {
      "sans-serif": 3,
      "serif": 1,
      "monospace": 1
    }
  },
  "fonts": [
    {
      "fontFamily": "Inter",
      "category": "sans-serif",
      "count": 48,
      "sizes": ["14px", "16px", "24px", "32px"],
      "weights": ["400", "500", "700"]
    }
  ]
}

CSV Export

"Font Family","Category","Usage Count","Sizes","Weights"
"Inter","sans-serif","48","14px, 16px, 24px, 32px","400, 500, 700"
"Playfair Display","serif","12","32px, 48px","700"
"Fira Code","monospace","6","14px","400"

HTML Export

The HTML export generates a beautiful standalone report with:

• Gradient background
• Font previews using actual fonts
• WCAG-friendly colors
• Print-optimized styles
• Responsive layout

Markdown Export

Perfect for documentation and GitHub READMEs:

# Font Report: example.com

**Generated:** January 17, 2026
**Total Fonts:** 5

## Fonts Found

| Font | Category | Usage |
|------|----------|-------|
| Inter | sans-serif | 48 |
| Playfair Display | serif | 12 |

Technical Details

Permissions

Font Inspector Pro uses minimal permissions:

We do NOT have access to:

• Your browsing history
• Other tabs or windows
• Bookmarks or passwords
• Any data outside the current page

Privacy

• ✅ Zero analytics or tracking
• ✅ No network requests
• ✅ No data storage
• ✅ Everything runs locally in your browser
• ✅ Open architecture — inspect the code yourself

Browser Support

• Chrome 88+ (Manifest V3 required)
• Edge 88+ (Chromium-based)
• Brave, Opera, and other Chromium browsers

Tips & Best Practices

For Designers

1. Use List All Fonts first to get an overview of the typography system
2. Check font pairing suggestions for inspiration on your own projects
3. Export HTML reports to share findings with your team
4. Highlight fonts to understand the typography hierarchy

For Developers

1. Copy CSS directly from the tooltip for quick implementation
2. Use JSON export for programmatic processing
3. Check the element selector in the tooltip to find elements in DevTools
4. Export Markdown for documentation

Common Use Cases

Keyboard Shortcuts

Troubleshooting

Inspector not working?

1. Refresh the page and try again
2. Check if the site uses iframes — content inside cross-origin iframes cannot be inspected
3. Some sites block content scripts — try on a different site

Fonts showing as "system-ui" or "-apple-system"?

These are system font stacks. The browser chooses the actual font based on the operating system:

• macOS: San Francisco
• Windows: Segoe UI
• Android: Roboto
• Linux: Various

Missing font pairings?

The pairing database covers 30+ popular fonts. If a font isn't recognized, suggestions are based on its category (serif, sans-serif, etc.).

Changelog

v2.0.0 (January 2026)

• ✨ Added font pairing suggestions
• ✨ Added multi-format export (JSON, CSV, HTML, Markdown)
• ✨ Added font category detection
• 🎨 Improved UI with better panels
• 🔒 Maintained zero data collection

v1.0.0 (December 2025)

• 🚀 Initial release
• Hover to inspect
• List all fonts
• Copy CSS

Links

• Install from Chrome Web Store
• Privacy Policy
• ponITech Website

Credits

Built with ❤️ by ponITech

Free to use. Privacy-focused. No data collection.

License

Font Inspector Pro is free to use.