How to Find What Font a Website Uses (Even When the CSS Lies)

October 14, 2026

5 min readIncludes a live font-stack test

Most guides to finding a website’s font say the same thing: install an extension, or right-click, Inspect, and read the font-family line. That works on simple sites. On many modern sites it gives you a confident, wrong answer, for two reasons this post explains. Then it walks through the methods that give the right one.

The first font in the list is not always the one you see

A CSS font-family is a wish list, not a statement. The browser goes through it left to right and uses the first font your device can render. If the site asks for a font that did not load, or one only installed on the designer’s Mac, you are looking at the next one down. Try it with the test below: it checks each font in a stack against what is available on your device right now.

Try the “typical SaaS stack”. Unless you have Söhne installed, the stylesheet and your screen disagree. Any tool that reports only the first name in the list gets this wrong, for every visitor in the same position as you.

Sites rename their fonts

The second trap is quieter. A site’s @font-face rule can give a font any name it likes. Design systems do this all the time so they can swap typefaces without touching every component:

Six methods, and what each one misses

Each method is good at some cases and blind to others. Tap a column to see which methods handle that case properly.

Method 1: Rendered Fonts (start here)

This is the most reliable free method and it is already in your browser.

• Chrome / Edge: right-click the text → Inspect → the Computed tab → scroll to the bottom. Rendered Fonts names the font that actually drew that element, and how many glyphs came from it.
• Firefox: right-click → Inspect → the Fonts tab in the side panel. It lists fonts used on the selected element and the whole page, shows the file URL, and for variable fonts gives you sliders for each axis.

Because these read the font file the browser actually used, they see through fallbacks and renamed families.

Method 2: list every loaded font from the console

To see every webfont on the page at once, paste this into the Console:

[...document.fonts].filter(f => f.status === 'loaded')
  .map(f => `${f.family}  ${f.weight}  ${f.style}`)

This gives family names as declared (so aliases appear here too) plus the weights that actually loaded. To get the real name, open the Network tab, filter by Font, and look at the file names. Foundries’ files are usually named after the typeface, such as GTWalsheim-Medium.woff2. If the files have hashed names, open one: font managers and sites like Wakamai Fondue read the true name from inside the file.

Method 3: extensions, for a quick look

WhatFont, Fonts Ninja and similar extensions are fast for hovering around a page, and they are right most of the time on sites that use Google Fonts under their own names. Treat them as a first guess. If the name they report is something you cannot find on any foundry site, it is probably an alias, and Method 1 will give you the real one.

Method 4: text in images, logos and canvas

If you cannot select the text, it is not text. It is pixels (an image, an SVG outline) or drawing (canvas, WebGL). Browser tools cannot name it. Upload a clear, tightly cropped screenshot to an image-based identifier such as WhatTheFont. Results are a ranked list of close matches, and logos are frequently custom-drawn, so treat the result as a starting point. For text drawn in a canvas, the font file usually still loads normally, so check the Network tab first.

Method 5: variable fonts, weights and settings

Knowing the family is half the answer. Two sites can both use Inter and look nothing alike because of weight, size, letter-spacing and, for variable fonts, custom axis values. In the Computed tab, note font-weight, letter-spacing, line-height and font-variation-settings as well as the family. Getting the font right and the tracking wrong is the most common reason a rebuild “feels off”.

Method 6: get the whole type system from a URL

If you need more than one font (the full type scale, every weight, the files and how they are used), a runtime capture is faster than inspecting element by element. Enrichr’s extract_design_system returns every webfont the page loaded, with real names, weights and source files, alongside the type scale, colours and spacing. That is what you want when rebuilding a site, as in extracting design tokens from a live website.

Found it? Now check the licence

A font file on someone’s site is licensed to them. Using the same file on yours is usually a breach of the foundry’s terms, even if the browser let you download it. (More in is it legal to copy a website design?) Your options are to buy a licence or pick a free typeface with a similar feel. Some commonly suggested free alternatives:

“Similar feel” is not identical. Set your candidate at the same size, weight and letter-spacing as the original and compare them side by side before you commit.

FAQ