FontLens — Font Inspector to Copy Website CSS

Find a typeface and its styling from selected text. Preview edits, check contrast, and export a snippet for your own stylesheet.

FontLens is a font inspector for selected text on a website. It reads the computed family stack and styling, then opens an editable panel over the page. See how a heading was styled without searching through a stylesheet, and match a mockup using the values. The panel shows the declared family stack rather than guaranteeing which face rendered every character. A specimen gives you a sample of the first family, with measured guides for its height and baseline. 🔍 WHAT YOU GET • Read size, weight, line height, and color in separate editable fields. Additional non-default properties appear when relevant. • Take one value or a complete snippet into your project. The CSS inspector also offers SCSS, SASS, and Tailwind output. • Use the size converter to switch units between px, rem, pt, and em; the displayed value and generated code follow your choice. • Try changes in a live preview with your own sample words and background. Reset to the site's values when you want to start over. 🖱️ HOW IT WORKS 1. Select the words you want to examine on an ordinary web page. 2. Right-click the selection and choose the FontLens inspection entry. 3. Read the details, adjust a value, or copy what you need. 4. Close the panel with Escape or its close button. The menu entry appears for selections. The popup provides instructions rather than a separate browsing tool. ♿ CHECK READABILITY To check text contrast against WCAG, compare the foreground and preview background. The panel reports a ratio and AA or AAA results for normal and large lettering. These marks describe that color pairing, not an accessibility audit of the entire document. 💡 GOOD TO KNOW What font is this? Use the family information as a typeface finder when you want to identify the typeface used on a website. The provider badge recognizes Google Fonts and Adobe Fonts, and distinguishes self-hosted or system faces. Can I download files from the inspected source? When a source is found, the download action fetches it; a blocked request opens that address in another tab. Installed system faces have no file to retrieve this way. Check the license before reuse. 🔒 DATA AND SETTINGS Inspection happens in your browser. Local storage remembers your sample words, preferred unit, and snippet format across sessions; edits to styling are not saved as permanent changes to the site. Retrieving a typeface contacts its original source. No extension account is required.