Font Inspector: How to Identify Any Font on Any Website Instantly

Ever seen a font on a website and wondered what it is? Digging through Chrome DevTools takes minutes. Font Inspector shows you the font name, size, weight, color, and full CSS in one hover — no DevTools needed, completely free.

Font Inspector showing font details tooltip on hover

Font Inspector shows font family, size, weight, line height, and color on hover

What Is Font Inspector?

Font Inspector is a free Chrome extension that activates an invisible overlay on any website. As you hover over text, a floating tooltip shows you every font property — family, size, weight, line height, letter spacing, and color. Click to pin the panel and copy the complete CSS snippet with one click.

It works with Google Fonts, system fonts, and custom web fonts. No API key. No account. No data leaves your browser.

How to Identify a Font in 3 Steps

Install the Free Extension

Add Font Inspector to Chrome from the Chrome Web Store in under 30 seconds. No account or login required.

Hover Over Any Text

Click the extension icon to activate Font Inspector. Hover over any text on any website — a tooltip shows the full font details instantly.

Click to Pin & Copy CSS

Click the text to pin the details panel. Press "Copy CSS" to copy the full font CSS ready to paste into your code editor.

Install Free — Add to Chrome →

Font Inspector pinned details panel with CSS copy button

Pinned details panel — copy the full font CSS snippet in one click

What Font Details You Get

Every hover shows you the complete picture:

Font family — the exact name Chrome is rendering
Font size in px
Font weight (400, 700, etc.)
Line height
Letter spacing
Color in HEX
Google Fonts download link when applicable
Alt+F keyboard shortcut to toggle without opening popup

Font Inspector showing Google Fonts download link

Google Fonts detected — download link shown directly in the panel

Who Uses Font Inspector?

Web Designers

Identify fonts on competitor sites and inspiration pages without digging through DevTools.

Frontend Developers

Get exact CSS font values and copy them directly into your project with one click — no guessing.

Brand Managers

Verify that correct brand fonts are used consistently across all pages and third-party sites.

UI/UX Researchers

Analyze typography choices across different websites to inform your own design decisions.

Frequently Asked Questions

Does Font Inspector work on all websites? +

Yes — it works on virtually any website including Google, YouTube, Twitter, and more. The only exception is system browser pages like chrome:// URLs.

Can it detect Google Fonts? +

Yes. Font Inspector identifies Google Fonts, system fonts, and custom web fonts loaded via @font-face — it reads the actual computed font value from the browser DOM.

Is it completely free? +

Completely free. No signup, no subscription, no payment required. Install from the Chrome Web Store and start identifying fonts in seconds.

What is the keyboard shortcut? +

Press Alt+F on any page to toggle Font Inspector on or off instantly without opening the popup.

How do I copy the CSS for a font? +

Click any text while Font Inspector is active to pin the details panel, then click "Copy CSS" to copy the full font CSS snippet ready to paste into your project.

Start Identifying Fonts Free

No account. No DevTools. Hover over any text on any website and see its font instantly.

Add to Chrome — It's Free →

Free forever · No signup · Works instantly

← Back to Blog View Extension Page →