What Font Is This Website Using? 4 Ways to Find Out

Inspect the text and read two things in the Computed tab: the font-family value, which is the site's list of preferences, and Rendered Fonts, which is the font Chrome actually used.

1. 1Right-click the text you're curious about and choose Inspect.
2. 2In the Elements panel, open the Computed tab next to Styles.
3. 3Find font-family. It lists fonts in order, such as "Inter, system-ui, sans-serif".
4. 4Scroll all the way down to Rendered Fonts. It names the font that drew the text, and whether it came from a file on your computer or from the network.

The difference matters. A font-family list is a wish list: the browser goes down it and uses the first font it can load. If the web font fails to load, or a font in the list isn't on your device, the text is drawn in the next one down, and only Rendered Fonts tells you so. Chrome's own docs use it this way, showing a page where Chrome "found Courier New in local files".

For a whole page at once, Chrome's CSS Overview panel (More tools > CSS Overview) also lists every font used, grouped by size, weight and line height.

Open the Inspector and choose the Fonts tab. It lists the fonts used by the selected element and, under All fonts on page, every font the page uses.

• Fonts used: the fonts that actually render the selected element's text, grouped by family.
• All fonts on page: each font's name and the URL of its file, or "System" for a font loaded from your computer. You can copy the URL and see the @font-face rule.
• Variable fonts: the Fonts tab shows the font's axes (weight, width and any custom ones) with a control for each.

Its advantage over Chrome's view is the file URL: it tells you where the font came from as well as what it's called.

Yes. WhatFont is a Chrome extension: click its icon, hover over any text and it shows the font; click to see more.

Its Chrome Web Store listing calls it "the easiest way to identify fonts on web pages" and lists about 3,000,000 users (October 2026). The details panel shows font names and sources, letter spacing, line height and the HTML element, and lets you copy the CSS.

An extension reads the same styles DevTools does, so it is faster, not more accurate. When a site uses a renamed font or a fallback, check Rendered Fonts or Firefox's Fonts tab to be sure.

Use a font identifier that matches letter shapes. WhatTheFont, from MyFonts, takes an image of the text, compares it against its catalogue and lists the closest fonts with previews you can type into.

MyFonts offers it as an app for iOS and Android. For the best match, crop to a single line of text, keep it straight and as large and sharp as you can, and pick text with distinctive letters (a, g, R and Q tell fonts apart more than o and l). The results are candidates, not a certainty: many fonts look alike at small sizes.

If the text is live on a web page, don't screenshot it. DevTools gives you the real name, not a guess.

For text on a web page, DevTools: it is free, built in and exact. For speed, an extension. For text in an image, a font identifier.

Because a build tool renamed it. Next.js's next/font, for example, downloads Google Fonts at build time and serves them with the site's own files, under a font-family name Next.js generates. Its docs put it plainly: "No requests are sent to Google by the browser."

The result is names like __Inter_d65c78 in DevTools, often next to a second face with Fallback in its name. Next.js adds that fallback by default for Google fonts to reduce layout shift while the real font loads. Strip the leading underscores, the hash at the end and words like Fallback or Variable, and you have the typeface: Inter. Livery does exactly that before it groups sites by font.

• Fallback stacks: a font-family that starts with system-ui or -apple-system means the site uses each device's own interface font, so it looks different on Mac, Windows and Android. Rendered Fonts names the one on your device.
• Variable fonts: one file holds a whole range of weights (and sometimes widths), so you won't find separate files for regular and bold. Names like "Inter Variable" are the same typeface.
• Custom names: some sites rename a font after the brand ("BrandSans"). Firefox's Fonts tab shows the file URL and the @font-face rule, which often reveal the original.

Only if its licence lets you. A font being visible on a site means the site's owner licensed it for that site, not that it is free for you. Downloading the file from their server doesn't give you a licence. This is not legal advice.

Many fonts are free. In the Google Fonts collection, "most of the fonts" use the SIL Open Font License 1.1, some use Apache 2 and the Ubuntu fonts use the Ubuntu Font Licence; the project still advises reading the licence for every font you use. Install free fonts from their official source. For a commercial font, buy a licence or pick a free font with a similar feel.

Livery labels every font in a kit as free to reuse or needing a licence, and a font that needs one always comes with a free alternative. To see which sites use a typeface, browse the library by font (for example, every site set in Inter), and the State of Web Design report counts the typefaces across every site Livery has measured, with each typeface's renamed spellings counted once.