What font is this? How to identify any font on a website

Last updated 7 August 2026

Method 1: a browser extension

This is the right answer for almost everyone. You hover over text, and the font name, size, weight, line height and colour appear next to the cursor. No panels, no element picking, no reading CSS.

Every tool in this category works roughly the same way, and there are meaningful differences between them, which is why there is a full nine-way comparison on this site rather than a list of names here. The short version: Font Finder by unixeco is the safest maintained free pick, Fontanello is the most minimal, and Fontlens is ours and is the one that also gives you contrast numbers and tells you when the font is a fallback.

One thing to know before you install any of them: these extensions have a shared failure mode where they quietly do nothing until you reload the tab. It happens when the extension was installed or updated while the tab was already open. If a font inspector seems broken, reload the page once before concluding it does not work.

Method 2: DevTools, with nothing installed

Slower, but always available and always accurate. It is also the method that tells you the most about why the font is what it is.

1. Right-click the text and choose Inspect. Or press F12 and use the element picker, the arrow-in-a-box icon at the top left of the panel.
2. Make sure the right element is selected. Click directly on the text itself, not the box around it. Selecting a parent gives you that parent's font, which may not be the one you are looking at.
3. Open the Computed tab. It sits next to Styles. Styles shows what the CSS asked for. Computed shows what the browser decided.
4. Scroll to the very bottom for Rendered Fonts. This is the part most people never find, and it is the only place that names the font actually drawn on screen, along with how many glyphs it rendered.
5. Compare it against font-family in the Styles tab. If Styles says "Aktiv Grotesk", Arial, sans-serif and Rendered Fonts says Arial, the web font did not load. See below.

Firefox has a dedicated Fonts tab in its inspector that shows the same information more clearly, including a live preview of the rendered face. If you have Firefox open, use that instead.

Method 3: reading the stylesheet directly

Useful when you want the web font file rather than just the name, for instance to check the format, the weights being loaded, or whether the page is loading far more of a family than it uses.

• Search the stylesheet for @font-face. Each block names a family and points at the file being loaded. That file name is usually the most precise identification you will get.
• Or use the Network tab. Open DevTools, go to Network, filter by Font, and reload. You get every font file the page actually downloaded, with sizes. This is also the quickest way to see that a font failed: it shows up red, or does not show up at all.
• Check for a font service. A request to fonts.googleapis.com, use.typekit.net or fast.fonts.net tells you the family is from Google Fonts, Adobe Fonts or Monotype, which usually means you can find and license it in about a minute.

Method 4: the font is inside an image

If the text is part of a logo, a banner, a screenshot or a social post, none of the methods above will work. They all read the page's code, and a picture has no code describing the type inside it. This is not a limitation of any particular extension, it is the boundary of what the category can do.

What you need instead is image recognition:

• WhatTheFont by MyFonts is the most established. Upload, it isolates the glyphs and returns commercial matches.
• Fontspring Matcherator handles connected script and unusual glyph shapes noticeably better than most.
• Font Squirrel Matcherator is worth a second pass, since it weights free and open source families more heavily.

Three things dramatically improve the match rate, and all of them are about the image rather than the tool: crop tightly to a single line of text, straighten anything rotated or on a curve, and get the contrast as high as you can. A screenshot of dark grey text on a mid grey background will fail on every service listed above.

Method 5: identifying by eye

Sometimes you have nothing but a picture and no service returns a match, usually because the type is custom or heavily modified. At that point you are looking for distinguishing letterforms rather than an overall impression:

• Lowercase g. One storey or two is the single most useful split in the Latin alphabet.
• Uppercase R. The leg, straight, curved or angled, separates families that otherwise look identical.
• The terminal on lowercase a and t. Where the stroke ends, and whether it curves.
• The dot on i and j. Round, square or missing entirely.
• Numerals. Especially 1 and 4, which vary far more between families than letters do.

Identifont walks you through exactly these questions and narrows the field, which is often faster than scrolling a foundry catalogue hoping to recognise something.

Why the font you see is often not the font the page asked for

This is the part that trips people up, and it is the reason two different tools can give you two different answers about the same piece of text.

In CSS, font-family is not one instruction. It is a list:

font-family: "Aktiv Grotesk", Helvetica, Arial, sans-serif;

The browser walks that list from left to right and uses the first font it can actually get. If the web font request failed, was blocked by an ad blocker or a corporate proxy, timed out, or simply has not finished downloading yet, the browser silently drops to the next entry. Nothing warns you. The page just renders in a font nobody chose, and it looks subtly wrong in a way that is hard to name until you check.

It also happens per character. If the font is loaded but has no glyph for a specific character, an accent, a currency symbol, a piece of CJK text, the browser substitutes only for that character while the rest of the line stays correct.

So there are two different questions, and they have two different answers:

When those two disagree, you have found a font loading bug, and on a live production site that is usually worth telling someone about. Most font inspector extensions only report one of the two, which is why they sometimes seem to contradict each other. Fontlens shows both and flags the mismatch, which is the specific reason it was built.

Frequently asked questions