kgekdppfhdacjmnogfkklnljiglcphip
Click on any HTML element to get the font info in a popup! Font Inspector is an extension that helps you easily inspect all fonts within a website. To start working with this addon, simply click on the toolbar icon once to open the in-page UI. Then, click on any HTML element that you want to see the font info. Please note that, as long as the UI is open, no links (or other functions) on the page will work. The in-page UI has several pieces of information related to the selected font such as font size, style, color, family, etc. Besides, there is information about the current tab such as id, width, height, title, and URL. If you click on the toolbar icon or press the escape button on your keyboard, the in-page UI will disappear and all the links within the page work as normal. To report bugs, please fill the bug report form on the addon's homepage (https://mybrowseraddon.com/font-inspector.html).
Font Inspector
Use Font Inspector — a simple and powerful font finder that helps you quickly see what font is used on any webpage. Font Inspector is a practical Chrome extension for web designers, developers, and anyone curious about typography. It lets you identify fonts on websites instantly, without digging through CSS or opening developer tools. With one click from the browser context menu, you can inspect text and see real font details right on the page. Whether you work with websites daily or just want to understand how a page is styled, Font Inspector makes font discovery fast and easy. ❓ Why Choose Font Inspector? – Easily find fonts on websites without searching through code or complex tools. – Speed up your workflow with a lightweight and focused inspector Chrome extension. – Quickly check what font is used on any webpage and avoid guesswork. – Works across all modern websites, making it a reliable font finder for everyday use. ✨ Features That Make Font Inspector Stand Out ☆ User-Friendly Interface — a clean, intuitive layout that keeps font inspection simple and distraction-free. ☆ Detailed Font Analysis — view font size, weight, style, and rendering details in seconds. ☆ Font Family Insights — identify font-family settings and fallback fonts used on a page. ☆ Advanced Font Detection — inspect custom and embedded fonts used by modern websites. ☆ Inspect Actual Fonts — see the real font being rendered, not just the declared CSS value. 🛟 How to Use Font Inspector 1. Install the Font Inspector Chrome extension from the Chrome Web Store. 2. Open any website you want to analyze. 3. Right-click or activate the inspector to view font-family and inheritance details. 4. Check font type, style, and hierarchy directly on the page. 🎁 Benefits of Using Font Inspector ✅ Save Time — check font styles instantly without manual inspection. ✅ Boost Creativity — discover new fonts and typography ideas while browsing. ✅ Improve Workflows — combine font inspection with your existing design or development tools. 🧑 Who Is It For? Font Inspector is built for: 🔹 Web Designers and Developers — ideal for finding what font is used on inspiration sites or debugging typography issues. 🔹 Font Enthusiasts — explore and compare font styles across different websites with ease. 🔑 Key Use Cases ⦿ Analyze Fonts — identify and review font properties directly on live websites. ⦿ Check Font Types — quickly determine whether text uses serif, sans-serif, or custom fonts. ⦿ Discover Font Names — find font names instantly without leaving the page. ⦿ Design Inspiration — collect typography ideas while browsing real-world examples. 👣 Step-by-Step Guide 1️⃣ Open the website you want to inspect. 2️⃣ Activate the Font Inspector extension. 3️⃣ Hover over text to see font details in real time. 4️⃣ Save or reference font information for later use. 🔄 Common Scenarios ➤ Want to check font style on a website? Font Inspector makes it effortless. ➤ Curious about a font name you just saw? Hover over the text and get the answer instantly. ➤ Need font details for client work or design research? This extension keeps everything simple and fast. ⏪ Key Features Recap Identify what font is used on any webpage. Inspect real, rendered fonts instead of guessing from CSS. View detailed font information as a companion to Chrome DevTools. Find font names and styles without breaking your browsing flow. 💬 Frequently Asked Questions ❓ How do I find a font name? 💡 Activate Font Inspector and hover over the text to instantly see the font name and details. ❓ Can I inspect multiple fonts on one page? 💡 Yes. You can inspect and compare different text elements across the same page. 🚀 Font Inspector is a practical Chrome extension for anyone who wants to identify, analyze, and explore fonts on the web. From checking font styles to understanding font-family structure, it gives you clear answers without extra effort. Make Font Inspector your everyday font analyzer and simplify how you work with typography. 👆🏻 Install the Font Inspector Chrome extension and start exploring fonts with confidence.
Measuremate — Pixel Ruler for Web Design
Measure distances, inspect the box model, drop guides on any live page. A pixel ruler for the web — no DevTools. Measure distances between any elements on any website. Pixel ruler, CSS inspector, and alignment guides — everything you need for pixel-perfect design handoff, right in your browser. Measuremate is a measuring tool built for frontend developers, web designers, and QA engineers who need precise pixel measurements without leaving the browser. Lightweight, private, and fast. 🔍 INSPECTOR MODE — Click any element to inspect it. See dimensions, distances to neighboring elements, and full CSS details. Hover to preview before selecting. 📐 GUIDES MODE — Place vertical and horizontal ruler guides anywhere on the page. Snap to element edges, measure between guides, and verify alignment like in Figma. Switch between modes with a single keystroke. ━━━━━━━━━━━━━━━━━━━━━━━━ WHAT YOU CAN DO ━━━━━━━━━━━━━━━━━━━━━━━━ 📏 MEASURE DISTANCES between any two elements — spacing, gaps, padding, margins. On-page dimension lines show exact pixel values. 🎯 INSPECT THE CSS BOX MODEL with visual breakdown of content, padding, border, and margin (including negative margins). 🔬 VIEW DETAILED CSS by category — Layout (display, position, flex, grid, z-index), Text (font, color, line-height, letter-spacing), and Attributes. 🌳 NAVIGATE THE DOM TREE — browse from root to any element, hover to preview, click to inspect. 📐 DROP VERTICAL OR HORIZONTAL GUIDES on any page with a single keystroke. Use arrow keys for 1px precision, Shift+arrows for 10px jumps. 🧲 SNAP TO ELEMENTS — guides and cursor automatically snap to element edges and centers. Cmd+Shift+M (Mac) / Ctrl+Shift+M (Win) — Toggle Measuremate on/off 1 — Switch to Inspector mode 2 — Switch to Guides mode M — Show/hide the control panel V — Drop a vertical guide at cursor H — Drop a horizontal guide at cursor S — Toggle snap-to-alignment Q — Clear all guides Arrow keys — Move cursor/guides 1px (Shift for 10px) Esc — Clear selection ━━━━━━━━━━━━━━━━━━━━━━━━ WHO IT'S FOR ━━━━━━━━━━━━━━━━━━━━━━━━ • Frontend developers verifying pixel-perfect implementation against designs • Web designers checking spacing, alignment, and typography on live sites • QA engineers validating responsive layouts across breakpoints • Teams doing design handoff from Figma, Sketch, or other design tools • Anyone who needs a fast, clean ruler for the web ✓ Clean UI — does nothing until you activate it. No interference with the pages you browse. ✓ Lightweight — under 500 KiB, no bloat, no telemetry. ✓ Privacy-first — zero tracking, zero data collection. ✓ Works on any website, including SPAs and iframes. ✓ Figma-like distance measurements you already know how to read. ✓ Keyboard-first workflow for power users. 1. Click the Measuremate icon in your toolbar (or press Cmd/Ctrl+Shift+M) to activate 2. Hover over any element to preview its dimensions 3. Click to select — see distances to nearby elements appear on the page 4. Open the Main Panel with M to see full CSS, box model, and DOM tree 5. Press 2 to switch to Guides mode and drop alignment rulers ━━━━━━━━━━━━━━━━━━━━━━━━ FREE AND PRO ━━━━━━━━━━━━━━━━━━━━━━━━ We ship updates regularly. Feature requests and bug reports are always welcome.
Measure-it
Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels. Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels. Customize the overlay and selector from extension options.
WhatFont
The easiest way to identify fonts on web pages. Say goodbye to the complexity of developer tools for identifying fonts. With WhatFont, discovering the fonts used on websites becomes as effortless as hovering over text. Want more details? A simple click on any element reveals the styles applied, making it easier than ever to uncover the secrets behind beautiful typography. Recommended by Wired WebMonkey, Lifehacker, and SwissMiss. History: • 3.2.0 - Improved toolbar icon compatibility • 3.1.1 - Removed unnecessary developer logging • 3.1.0 - Added multiple color format support • 3.0.1 - Restored escape key to exit • 3.0.0 - Completely Rewritten: The entire extension has been rebuilt for better performance and usability. - Updated Permission Model: We've revised permissions to better respect user privacy while maintaining functionalities. - Refreshed Appearance: The look has been updated for a more modern feel. - Isolation from Host Website Styling: Ensures WhatFont's appearance is unaffected by the website it's used on. - Adaptive Toolbar Icon: The toolbar icon now changes based on the system's appearance settings. - Support for New CSS Color Values: Enhanced support for the latest CSS color values. • 2.1.0 - A new design thanks to Siddharth Mate • 2.0.3 - Retina toolbar icon • 2.0.2 - Fix option page for button styles • 2.0.1 - Use native screen capturer • 2.0 - Improved sharing • 1.7 - Added font services detection for FontDeck (Thanks to Mark Perkins) - Improved font detecting algorithm - Improved overall performance • 1.6.1 - Added color detection for text • 1.6 - Added a tweet button for instant sharing through Twitter - Improved style reseting • 1.5 - Overall restyling • 1.4.4 - Supported light icon for dark themes • 1.4.3 - Fixed a bug related to Typekit service detection • 1.4.2 - Reduced loading time - Supported HTTPS protocol • 1.4.1 - Fixed stylesheet bug • 1.4 - Restructured source code - Supported font services detection for Typekit and Google Font API - Fixed toolbar button bug. Second click is now "Exit WhatFont"
