What font is that? How to identify the font on any website

First, check that it is real text

Every method on this page reads the page’s code, so it only works on live text. Try to select the words with your cursor. If individual letters highlight, it is live text and you can name the font exactly. If the whole block moves as one picture, it is an image, a canvas or a video frame, and you will need a different approach.

Logos are the usual trap. Most logos are SVG or PNG files, often custom lettering that was never a font at all. Headlines, navigation, buttons and body copy are almost always live text.

Method 1: click the text with a font inspector

An inspector extension does the DevTools work for you and shows the answer next to the text. With Font Inspector it takes three steps.

1. Add the extension, then refresh the page you want to inspect. Tabs that were open before installing need one reload.
2. Click the toolbar icon and choose Pick text on page, or press Alt + Shift + F (Option + Shift + F on Mac). You can also right-click any text and choose Inspect Font.
3. Hover the text and click it. Press ↑ or ↓ if you grabbed the wrong element and want its parent or child. Esc leaves pick mode.

The panel shows the family and the full fallback stack, the font actually rendered, where it comes from (Google Fonts, Adobe Fonts, a self-hosted file or a font installed on your device), plus weight, size in px, em and rem, line height, letter spacing and colors. Click any value to copy it, or copy the whole style as CSS, Tailwind classes or SCSS variables.

Method 2: use your browser’s DevTools

Every desktop browser can tell you the font without installing anything. It takes a few more clicks, and the useful part is easy to miss.

Chrome, Edge, Brave and other Chromium browsers

1. Right-click the text and choose Inspect. The Elements panel opens with that element selected.
2. In the side pane, switch from Styles to the Computed tab.
3. Find font-family to see the declared list. Then scroll to the very bottom of the Computed tab to the Rendered Fonts section. That is the font in use, along with whether it came from the network or from your computer.

Firefox

Right-click, choose Inspect, then open the Fonts tab in the Inspector’s side pane. Firefox lists the fonts used by the selected element with a live preview, and has a section for all fonts on the page. For variable fonts it also shows sliders for each axis.

Safari

Turn on the Develop menu in Safari’s Advanced settings first. Then right-click, choose Inspect Element, and open the Font panel in the details sidebar of the Elements tab. It shows the primary font with its features and variation axes.

A full walkthrough with every panel is in how to find a font with Chrome DevTools.

Method 3: read the stylesheet and the network requests

This is the slow road, but it answers a different question: where do the font files come from? That matters when you want to license the same font.

• Open DevTools, go to the Network panel, filter by Font, and reload. Each row is a font file the page downloaded. The domain tells you a lot: fonts.gstatic.com means Google Fonts, use.typekit.net means Adobe Fonts, and the site’s own domain means self-hosted files.
• In the Sources or Style Editor panel, search the CSS for @font-face. Each rule maps a family name to its files, weights and styles.
• The file name often contains the real family name even when the CSS name is an internal alias such as brand-sans.

@font-face {
  font-family: "Brand Sans";            /* the name used in the CSS */
  src: url("/fonts/soehne-buch.woff2") format("woff2"); /* the real clue */
  font-weight: 400;
  font-display: swap;
}

Font Inspector’s Get this font section does this lookup for you: it links to the family on Google Fonts or Adobe Fonts, lists the files a self-hosted font loads, and suggests free look-alikes when the original is a paid typeface. More on that in how to get the font you found.

Method 4: when the text is an image

No code inspector can read a font out of pixels, and that includes Font Inspector. For logos, banners, social cards and screenshots, use an image-based identifier such as MyFonts WhatTheFont, Font Squirrel Matcherator or WhatFontIs.

• Crop tightly to one line of text in one style.
• Use the largest, sharpest version you can find. Straighten rotated text.
• Make sure letters are not touching. Distinctive letters help most: lowercase a, g, y, uppercase R, Q, and the numerals.
• Treat the result as a shortlist, then compare candidates by eye.

One shortcut: the same brand usually sets its website in the same typeface as its graphics. Inspect the live headline on the page first. It is exact, and it takes a second. There is more in identifying a font from an image.

Reading the result like a designer

A family name is only part of why text looks the way it does. Two sites can use the same typeface and feel nothing alike. Note these together:

• Weight. 400 and 500 look close in isolation and very different across a page.
• Size and line height. Body text at 18px with a 1.6 ratio reads differently from 15px at 1.4. See line height and letter spacing.
• Letter spacing. Large headlines are often tightened slightly. Small caps labels are usually opened up.
• Color and contrast. Dark gray on off-white is softer than pure black on white.
• The rest of the page. Headings and body copy are often different families. Use Fonts on this page to see every font a page uses at once.

When you want to try the combination yourself, the font pairing playground and the type scale calculator are a quick way to rebuild the feel with your own text.

You found it. Can you use it?

Knowing the name does not give you the right to use the font. Fonts are licensed software. Google Fonts are open source and free for commercial work. Adobe Fonts come with a Creative Cloud subscription. Most other professional typefaces need a web license from the foundry, usually priced by traffic.

Do not copy font files from another site’s server. If the original is out of budget, look for an open alternative with similar proportions. Font Inspector suggests free look-alikes for many popular paid fonts, and you can test them against your own content before deciding.