How to find out what font a website uses

Four ways to identify the font, size and color of text on any web page, plus what to do when the text is an image.

1. Chrome or Edge: DevTools

  1. Right-click the text and choose Inspect.
  2. In the panel that opens, switch to the Computed tab and type font into its filter box.
  3. font-family is the font stack the site asked for, for example Inter, Helvetica, Arial, sans-serif. font-size, font-weight, line-height and color are listed next to it.
  4. Scroll to the bottom of the Computed tab: Rendered Fonts names the font that actually drew the text.

2. Firefox: the Fonts panel

Right-click the text → Inspect, then open the Fonts tab in the right-hand pane. It lists the fonts used by the selected element (and, further down, all fonts on the page) with a preview, and shows where each web font was loaded from.

3. Safari: Web Inspector

Turn on the developer tools first: Safari → Settings → Advanced → Show features for web developers (older versions: Show Develop menu). Then right-click the text → Inspect Element and read font-family, font-size and color under the Computed styles. On an iPhone there are no developer tools without a Mac, so use a desktop browser.

4. A browser extension (hover instead of digging)

PlainInspect (ours, free) shows the font family, size, line-height, weight, letter-spacing, text color and background of any text you hover, with its WCAG contrast ratio. Its page summary lists every font style and color the page uses, and you can export them as CSS variables or Tailwind. It reads the page only when you click its button.

One limit applies to every extension of this kind: it reports the font the site asked for (the first name in the stack). If that web font failed to load or isn't installed, the browser silently uses the next one. When it matters, confirm with Rendered Fonts in Chrome or the Fonts panel in Firefox.

The text is an image or a logo

Logos, banners and text inside images are pixels, not fonts, so none of the above can read them. Upload a clear, horizontal crop to an image font identifier (WhatTheFont from MyFonts is a well-known one) and compare its suggestions by eye: it finds close matches, and custom logo lettering often has no exact match.

Using the font yourself

Knowing the name is not the same as having a license. Fonts served from Google Fonts are open source and free to use. Commercial fonts (Adobe Fonts, foundry fonts) must be licensed separately, even if you can see the file being loaded by the site.

Frequently asked questions

Why does the site say one font but I see another?

font-family is a fallback list. If the first font is a web font that hasn't loaded, or a system font you don't have, the browser uses the next one. Chrome's Rendered Fonts (bottom of the Computed tab) and Firefox's Fonts panel show what was really used.

How do I find the font size and color too?

They sit next to font-family in the Computed tab (font-size, color, background). An extension like PlainInspect shows all of them on hover, with the contrast ratio.

Can I find the font of a whole website at once?

Firefox's Fonts panel lists all fonts used on the page. PlainInspect's page summary lists every font style with how often it is used.

Can I check whether the text color is readable?

Yes: paste the text and background colors into the free color contrast checker on this site to get the WCAG ratio with AA / AAA pass or fail.

Written with AI assistance. PlainInspect is our extension; the other methods are free.