FontLens

Select any text, right-click, and instantly inspect its font, size, weight, color and CSS — copy, tweak, preview and download.

Ever landed on a page, admired the lettering, and wondered "what font is this?" FontLens answers that question in a single click. Select any text on any website, right-click, and choose "Inspect font with FontLens." A clean, focused panel opens right over the page and reveals exactly how that text is styled: the typeface, its size, weight, line height, color, and every other detail behind the design. Whether you are a designer reverse-engineering a layout, a developer matching a spec, or simply curious about a beautiful headline, this tool turns any web page into an open book of typography. FontLens is a font finder and CSS inspector rolled into one. It does not just name the font family for you, it hands you ready-to-use code, an interactive playground to test ideas, and accessibility tools to make sure your text is readable. No account. No signup. Just select, right-click, and examine. 🔍 What you can do - Reveal the full typography of any selected words: font family, font size, font weight, line height, and the color at a glance - See extra styling that is easy to miss, such as letter spacing, text transform, and font style - Copy any single property with one click, or grab the entire rule set as a complete CSS snippet - Convert that snippet to Tailwind, SCSS, or SASS through simple tabs, then copy whole or line by line - Experiment in a live, editable preview: rewrite the sample words, tweak the values, swap the background, and watch it update instantly - Identify where a web font comes from with a provider badge (Google Fonts, Adobe Fonts, self-hosted, or a built-in system typeface) - Save a web font to your computer with the "Download font" button, pulled straight from its own source - Check color contrast against WCAG standards, with the exact ratio plus AA and AAA pass or fail results - Pick and sample colors with a full picker, including an eyedropper to grab any pixel on the screen - Switch measurement units between px, rem, pt, and em, applied to both the fields and the exported code 🖱️ How it works Using FontLens takes seconds. Highlight the words you want to study, right-click on the selection, and pick "Inspect font with FontLens" from the menu. The panel appears over the current page, neatly styled so it never collides with the site's own look. From there you can read the details, copy what you need, or start editing. The live preview is where things get fun. Change the wording to test a real headline, nudge the size, adjust the weight, or set a new background color to see how the type holds up. Your edits stick around as you move between pages and come back later, so an idea you started on one site is waiting for you on the next. When you want the original values back, the "Reset to site" button restores everything the page actually uses. Need the raw asset? For a downloadable web font, one button fetches the real file from its @font-face location. For a typeface that already ships with your operating system, FontLens tells you it is a built-in font, so you know it is available without any download. 🔒 Privacy first FontLens runs entirely inside your browser. There is no data collection, no tracking, no analytics, and no external servers involved in inspecting text. Everything you examine stays on your machine. The extension makes exactly one network request, and only when you deliberately press "Download font," at which point it reaches out to that font's own source to retrieve the file. Nothing else leaves your device. Permissions are deliberately narrow. The context-menu permission adds the right-click entry. The active-tab permission lets the tool read the text you selected on the tab where you invoke it, and nowhere else. Storage keeps your preview text and your unit and format preferences so they are remembered next time. There is no broad access to your browsing history and no sweeping host permissions. 👥 Who it is for - Web designers who want to identify a typeface, capture a palette, and reuse styles quickly - Front-end developers matching a mockup or lifting exact font family and spacing values into code - UI and UX engineers building consistent, on-brand type systems - Students learning CSS and typography who want to see how real sites are put together - Accessibility auditors verifying that text meets WCAG contrast requirements before shipping - Bloggers, marketers, and curious readers who simply want to know what font a site is using ✨ Why people keep it around - One right-click gives you the answer instead of digging through developer tools - The code is copy-ready in plain CSS, Tailwind, SCSS, or SASS, so it drops straight into your project - The editable preview lets you prototype type choices without touching a single line of code - The contrast checker builds accessibility into your workflow rather than leaving it as an afterthought - The color picker and eyedropper mean you can sample and reuse exact colors from anywhere on the page - Light and dark themes follow your operating system automatically, so it feels at home day or night - Unit switching between px, rem, pt, and em keeps the output aligned with however your codebase is written 🎨 A closer look at the details Typography is more than a name. FontLens surfaces the small decisions that make text feel right, from the weight of a heading to the breathing room in line height and the subtle tracking of letter spacing. Seeing these values side by side helps you understand why a design works and how to recreate it. The provider badge adds context too, telling you at a glance whether you are looking at a Google Fonts asset, an Adobe Fonts face, a self-hosted file, or a system default, which is often the first clue when you set out to match or source a typeface. The color tools go beyond a static readout. The picker offers an HSV square with hue and alpha sliders, and it speaks HEX, RGB, and HSL so you can work in whichever format suits you. Pair that with the eyedropper and you can lift the precise shade of any element and drop it into your preview or your notes. 🚀 Start inspecting Add FontLens, highlight some words, and right-click to reveal the typography, styles, and colors behind any page. It is a fast, private, and genuinely useful companion for anyone who cares about how the web reads. Install it, keep it handy, and never wonder about a mystery font again.