How to find out what font a website uses (4 free ways)

You land on a site, the type looks perfect, and you want it for your own project. The good news is that the browser already knows exactly which font it's drawing. You just have to ask it the right way, because the obvious answer (the font-family in the CSS) is often not the font you're actually seeing.

Method 1: Check "Rendered Fonts" in DevTools (most accurate)

This is the one to learn, because it answers the real question: which font file drew these pixels.

1. Right-click the text you care about and choose Inspect.
2. In the Elements panel, switch the right-hand pane from Styles to Computed.
3. Type font in the filter to see font-family, font-size, font-weight and line-height.
4. Scroll to the very bottom. Under Rendered Fonts Chrome lists the font it actually used, and how many glyphs came from it.

In Firefox, it's even more direct: the Inspector has a Fonts tab that shows the fonts used by the selected element, and a list of every font on the page, with a live preview.

When DevTools shows a font you can't find

Some names aren't downloadable fonts at all. They point at whatever the operating system uses:

That last one catches a lot of people. Next.js renames fonts it self-hosts, so the family reads like gibberish. Strip the underscores and the hash and you have your answer.

Method 2: List every font on the page with one console snippet

When you want the whole picture rather than one element, open the console (Cmd+Option+J on Mac, Ctrl+Shift+J on Windows) and paste this:

1// Every web font the page has loaded, with weight and style
2[...document.fonts]
3  .filter((font) => font.status === "loaded")
4  .map((font) => `${font.family} ${font.weight} ${font.style}`);

document.fonts only knows about web fonts loaded with @font-face, so system fonts won't show up. For those, this tallies the font-family stacks the page actually applies, most used first:

1// Which font stacks the page uses, and on how many elements
2const stacks = new Map();
3for (const el of document.querySelectorAll("body *")) {
4  const family = getComputedStyle(el).fontFamily;
5  stacks.set(family, (stacks.get(family) ?? 0) + 1);
6}
7console.table([...stacks].sort((a, b) => b[1] - a[1]));

The top row is almost always the body font. The next one or two are usually headings and code.

Method 3: Watch the Network tab

Fonts are files, so you can see them arrive.

1. Open DevTools and go to the Network tab.
2. Click the Font filter.
3. Reload the page.

Each row is a font file, usually .woff2. The name often gives it away (Inter-SemiBold.woff2), and the domain tells you where it's licensed from:

This is the fastest way to answer "is it a Google Font?", which matters a lot once you get to licensing.

Method 4: Use a browser extension

If you do this often, an extension saves the clicks. WhatFont is the long-standing option for Chrome: turn it on, hover any text, and it shows the family, size and weight in a tooltip.

What if the text is an image?

Logos, hero banners and screenshots are pixels, not text, so none of the methods above can see them. For those, use an image matcher: upload a screenshot to WhatTheFont (by MyFonts) or Font Squirrel's Matcherator, and they'll suggest the closest matches. Crop tightly to a single line of text and include distinctive letters like g, R, a and Q for the best results.

Which method should you use?

Found it. Can you use it?

Identifying a font and being allowed to use it are different things. Before you ship it:

• Google Fonts are open source (mostly under the SIL Open Font License), so they're free for personal and commercial projects. Add them from Google Fonts, or with next/font/google in a Next.js app.
• Adobe Fonts are licensed through an Adobe subscription and served from Adobe's servers. You can use them if you have one.
• Anything else is probably a commercial font from a foundry. Look up the name, and check the license and price on the foundry's site.

If the font is paid and you don't want to buy it, search Google Fonts for something with similar proportions. Most popular commercial sans-serifs have a close free alternative.

Using the font in Tailwind

Once you have a font you can use, register it as a family. In Tailwind v4 it's one line in your CSS:

1@theme {
2  --font-sans: "Inter", system-ui, sans-serif;
3}

In Tailwind v3, extend fontFamily in tailwind.config.ts instead, and font-sans will use it everywhere. Grabbing the font is usually the first step of pulling a whole look from a site. If you want the colors, spacing and type scale too, see how to extract a website's design system into a Tailwind config.