Fontlens - Font Finder, What Font & Color Inspector

Description

Identify any font on any website. Size, weight, line height, HEX/RGB/HSL colors and WCAG contrast. No DevTools needed. Fontlens is a font finder and colour inspector for any website. It tells you exactly what font a page is using, what colour, and whether that text is actually readable. Hover over any text and everything is right there. No DevTools. No digging through CSS. One click. WHAT YOU GET Fonts - The font that is really rendering, not just the first name in the CSS - A clear warning when the browser substituted a different font, and which one the page actually asked for - Size in px and rem, weight with its proper name, line height, letter spacing - The full font-family stack as declared - The web font file the page is loading, when there is one - Click the font name to search it Colours - Text and background colour in HEX, RGB or HSL, switch with one click - Correct handling of transparent text, composited over what is actually behind it - Modern colour spaces work properly, including oklch, lab and color() Accessibility - WCAG 2 contrast ratio with a pass or fail for AA and AAA - Correct thresholds for large text, so headings are not flagged unfairly - APCA (the WCAG 3 draft) shown alongside, with the minimum it needs at that size Try a different font, right on the page - Type any font name and see the page redrawn in it instantly - Reset puts everything back. Nothing is saved to the site Save the fonts you like - One click keeps a font, with its size and weight, for later - Your saved list stays on your machine, no account, no sync Whole page report, four tabs - Fonts: every font used on the page, with how often each one appears - Contrast: every text element failing WCAG AA, grouped by colour pair and text size, click any one to jump straight to it - Colours: the page's full colour palette, click a swatch to copy it - Saved: the fonts you kept - Copy the whole report as plain text Copying - Click any single value to copy it - Copy summary for a readable line to paste into Figma, Slack or notes - Copy CSS for ready-to-paste declarations, with the contrast noted as a comment BUILT TO ACTUALLY WORK The most common complaint about font inspectors is that they stop working and you have to reload the page. Fontlens is built so that never happens: it activates when you click the icon, and a fresh copy always replaces an old one after an update. Works inside Shadow DOM, so it still works on sites built with web components, where most inspectors report the wrapper instead of the text. PRIVACY Fontlens asks for one permission: access to the tab you are actively using, only when you click the icon. It has no access to your browsing, your history, or any site you are not looking at right now. Fontlens collects nothing at all. No analytics, no tracking, no account, no network requests of any kind. Everything happens inside your browser and stays there. SHORTCUTS - Click the toolbar icon to start or stop - Click the page to pin the panel, then click values to copy - Esc to exit WHO IT IS FOR Web designers checking a handoff, developers rebuilding a page, and anyone who has ever looked at a website and wanted to know what font that is. Free, and staying free.

Details & SEO