FontLens

Free extension for Chrome

What font is this? Right-click and see the CSS

Select text on any website, right-click and choose Inspect font with FontLens. A font inspector opens over the page with the family, size, weight, line height and color, the CSS ready to copy, and a button to download the font.

Add to Chrome — free

Also works in Edge, Brave, Opera and other Chromium browsers.

The FontLens inspector: the specimen Ag between cap-height, x-height and baseline guides, the font properties and a Tailwind snippet

At a glance

What it does
Shows the font of the text you select: family, size, weight, line height, color and other styles that differ from the default, with the CSS ready to copy.
How to start
Select text, right-click and choose Inspect font with FontLens. The menu item appears only when text is selected.
Copy as
CSS, SCSS, SASS or Tailwind, with the size in px, rem, pt or em.
Font file
Download font fetches the web font from its @font-face source. Check the font's license before you use it.
Who it is for
Web designers, front-end developers, accessibility auditors and students learning CSS.
Price
Free. No account, no paid version.
Data
Runs in your browser. No servers, no analytics. The only request it makes is the font download you start.
Works in
Chrome and other Chromium browsers that install from the Chrome Web Store. Not Firefox or Safari.
Limits
Reads the CSS of real text on web pages. Not text in images, canvases or PDFs, and not Chrome's own pages.
Version
2.2.0, updated October 23, 2026

Two clicks to the font

  1. 1

    Select text

    A heading, a paragraph or a button label on any web page.

  2. 2

    Right-click

    Choose Inspect font with FontLens. The inspector opens over the page with the family, size, weight, line height and color.

  3. 3

    Copy or tweak

    Copy the CSS or Tailwind, try another size or color in the live preview, or download the font file.

Why people open it

Aa

Name a typeface

Saw a headline you like? Select it and read the family, the weight and where the font comes from: Google Fonts, Adobe Fonts or the site itself.

{ }

Match a mockup

Compare the numbers on the live page with the design file, then copy the rules as CSS, SCSS, SASS or Tailwind.

4.5:1

Check contrast

Read the contrast ratio with AA and AAA marks, and try a darker text or a lighter background before the design ships.

What it does

  • Specimen with guides

    The first family of the stack, drawn between cap-height, x-height and baseline guides measured from the font itself.

  • snippet formats

    CSS, SCSS, SASS and Tailwind. Copy the whole snippet or one line; your last format is remembered.

  • Your units

    Show the size in px, rem, pt or em, in the fields and in the snippet. rem follows the page's own root size.

  • Font source

    A badge says where the font comes from: Google Fonts, Adobe Fonts, self-hosted, or a system font already on your computer.

  • Contrast check

    The ratio between text and background with AA and AAA marks for normal and large text, updated as you change colors.

  • Download font

    Gets the file from the @font-face source, named after the family. If the server blocks it, the source opens in a new tab.

Why “what font is this?” takes so long in DevTools

A page declares a list of fonts and the browser uses the first one it has. To find out which, you open DevTools, find the element, read the Computed panel, then hunt for the font file in the Network panel. Size, weight, line height and color sit in different places.

FontLens reads the computed style of the text you selected and puts it in one panel: the family stack, a specimen of the first family, the numbers, where the font comes from and the CSS. It reads the page's CSS, so it can't name a font inside an image.

Nothing leaves your browser

  • No account, no servers

    FontLens runs in your browser. No analytics, no tracking.

  • Reads what you select

    The inspector reads the styles of the text you right-clicked. Nothing about the page is sent anywhere.

  • Four permissions

    Context menu for the right-click item, active tab and page access so the inspector can open, storage for your sample text, unit and snippet format.

Chrome DevTools vs FontLens

Chrome DevTools vs FontLensChrome DevToolsFontLens
Get to the font of some textInspect, find the element, open the Computed panelSelect text, right-click, one menu item
Copy as Tailwind or SCSSNo, copy the values one by oneCSS, SCSS, SASS or Tailwind tab
Where the font comes fromLook for the font file in the Network panelA badge: Google Fonts, Adobe Fonts, self-hosted or system
Download the font fileFind it in Network or Sources and save itOne button
Contrast checkIn the color picker of the Styles panelAA and AAA marks next to a live preview
PriceBuilt inFree

Questions

How do I find out what font a website uses?

Add FontLens to Chrome, select some text on the site, right-click and choose Inspect font with FontLens. You see the font family, size, weight, line height, color and where the font comes from.

How do I copy the CSS of a font from a website?

In the inspector pick the CSS, SCSS, SASS or Tailwind tab and press Copy all, or copy a single line. Switch the unit to px, rem, pt or em first if you need it.

Can I download a font from a website?

When the text uses a web font, Download font fetches the file from its @font-face source. A system font has nothing to download. Check the font's license before you use it in your own project.

Can FontLens identify a font in an image or a PDF?

No. It reads the CSS of real text on web pages, so it can't name fonts in images, canvases or PDFs.

How do I check text contrast for WCAG?

The preview shows the contrast ratio between the text color and the background, with AA and AAA marks for normal and large text. Change either color and the marks update.

Can it show sizes in rem instead of px?

Yes. Switch the unit to px, rem, pt or em, and the fields and the snippet follow. rem is calculated from the page's root font size, and your choice is remembered.

Is it free? Does it collect data?

It's free, with no account. It has no servers and no analytics; the only request it makes is the font download you start.

Does it work in Edge, Brave or Opera?

Most Chromium browsers install extensions from the Chrome Web Store, including Edge, Brave, Opera and Vivaldi. Firefox and Safari are not supported.

More free extensions from PYROCTAL

Which font is that? Two clicks.

Add to Chrome — free