How to find out what font a website is using

Right-click the text, choose Inspect, and open the Computed tab in the Elements panel. The font that was actually drawn is listed under “Rendered fonts”. The font-family value you see in the Styles tab is only a list of candidates, and the browser may have used a later one.

Method 1: Chrome DevTools

DevTools is built into Chrome and needs no installation. Menu names can differ a little between browser versions.

1. Right-click the text you are curious about and choose Inspect. The Elements panel opens with that element selected.
2. Open the Styles tab. Type font in the Filter box to narrow the list. Look at font-family, font-size, font-weight and line-height. This is what the site’s CSS asks for.
3. Switch to the Computed tab. Scroll down to the Rendered fonts section. It lists the font families the browser actually used for the selected element, and each entry is marked as a Local file (installed on your computer) or a Network resource (a web font the page downloaded). The number of glyphs drawn with that font is shown too.

Rendered fonts is the answer to the question “what font is this?”. The Styles tab answers a different question: “what did the author ask for?”.

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

A font-family declaration is a font stack: several names separated by commas.

font-family: "Inter", "Helvetica Neue", Arial, sans-serif;

According to MDN, the browser selects the first font in the list that is installed or that can be downloaded with an @font-face rule. In practice that means:

• The first font may not be available. If “Inter” is not installed and the page failed to load it, the browser moves on to “Helvetica Neue”, then Arial.
• Fallback works one character at a time. MDN notes that font selection is done per character, so if the chosen font has no glyph for a character (for example a Japanese character in a Latin-only font), a later font in the stack is used for that character.
• Generic names are not one font. sans-serif and serif are generic families. The browser picks a real font for them, and that choice can differ between operating systems.
• The same site can look different on two computers. A web font that is downloaded looks the same everywhere. A font that is only referenced by name depends on what is installed.

Because of this, the Rendered fonts section reflects your browser on your computer. A visitor on another system might see a different fallback.

Method 2: look at the stylesheet or the network

If you want to know where a web font comes from, the @font-face rules in the stylesheet show the font name and the file it loads.

Method 3: a browser extension

Extensions save you from opening DevTools. Before you rely on one, check what it reports. Some read the font-family value from the computed style, which is the whole stack. Others report only the first family in it. Neither is guaranteed to be the font that was drawn, so if the answer matters, confirm it with Rendered fonts in DevTools.

Next step: check the license before you use the font

Knowing the name of a font does not give you the right to use it. Fonts are software, and each one comes with a license.

• Search for the font name together with the word “license”, and read the terms on the foundry’s or the distributor’s own page.
• Licenses often differ by use: desktop use, website use and app embedding can be separate, and a fee may depend on traffic or number of users.
• A web font that you can see in the Network resource list is licensed to the site that serves it. Downloading it and using it on your own project is generally not covered. Get your own license, or choose a font whose license allows what you want to do.
• If you cannot find a clear license, treat the font as not available for your use and pick an alternative.

This is general information, not legal advice. Read the actual license text for the font you plan to use.

Where CSS Glance fits

CSS Glance is a Chrome extension that shows a font’s family, size, weight and line height when you hover an element. It shows the first family in the font stack, so if that font is missing or fails to load it can differ from what is drawn; use DevTools to confirm. It cannot look inside iframes from other sites. It is free on the Chrome Web Store (Pro features are a one-time purchase).