What font is this website using? How to find out

The short answer, in any Chromium browser, takes four steps and about twenty seconds:

1. Right-click the text and choose Inspect.
2. Open the Computed tab in the Elements panel.
3. Scroll to the bottom, to Rendered Fonts. It names each font that drew glyphs in that element, whether it came from the network or a local file, and how many glyphs it drew.
4. If it says Network resource, find the file under the Network panel with the Font filter on, and you have the exact file the page served.

That answers which font. Two more questions usually follow - what the font is really called, and who made it - and both are answered by the file rather than by the stylesheet.

Why is the computed font-family not the answer? #

Because font-family is a request. The browser walks the list and uses the first family it can match, glyph by glyph, so the value in the Styles pane can name a font that drew nothing at all.

The file failed

A wrong path, a missing CORS header or a blocked CDN. The page silently renders in the next family in the list.

A glyph fell outside the subset

A unicode-range face covers part of the alphabet. An accented name or a curly quote is painted by a different font in the same line.

A generic keyword

system-ui or sans-serif resolves to a different font on every platform - San Francisco on Apple devices, Segoe UI on Windows, Roboto on most Android phones.

A local copy won

A local() source in @font-face uses the font installed on your machine. It renders for you and downloads nothing - and visitors without it see something else.

Each of these is covered in more depth in the note on why the font a page declares is not the font you see. For identification the point is narrower: read the outcome, not the request.

How do you find it in Firefox and Safari? #

Chrome, Edge, Brave

Elements, then Computed, then Rendered Fonts at the bottom. Per element, per glyph source.

Firefox

Inspector, then the Fonts tab. It lists the fonts used on the selected element with the URL each was loaded from, and a section for every font on the page. Variable fonts get their axes as live sliders.

Safari

Web Inspector, Elements, then the Font panel in the details sidebar. It shows the resolved family, its source and the font's feature and variation settings.

All three answer for one element at a time. For the page as a whole, the console has the loaded set:

[...document.fonts].map((f) => [f.family, f.weight, f.style, f.status]);

performance.getEntriesByType('resource')
  .map((r) => r.name)
  .filter((url) => /\.(woff2?|ttf|otf)(\?|$)/.test(url));

A face with status unloaded was declared and never needed. One with status error was needed and never arrived - which is the first place to look when the page looks almost right.

Where does the font file come from? #

The host in the file's URL is usually the quickest clue to the source, and the source decides what you can do next:

fonts.gstatic.com

Google Fonts. The family is in the public catalogue under an open licence, and the stylesheet from fonts.googleapis.com names it exactly.

use.typekit.net

Adobe Fonts. The family is licensed to that site's kit, not to you - the specimen page tells you what it is and how to license it yourself.

fonts.bunny.net

Bunny Fonts, a mirror of the Google catalogue. Same families, same names.

The site's own origin

Self-hosted. It could be anything from an open-source family to a commercial licence to a custom face drawn for the brand. The file itself is the only reliable witness.

Is the name in the CSS the real name of the font? #

Not necessarily. The font-family inside an @font-face block is an alias the stylesheet author chose. font-family: 'Brand Sans' can point at any file at all, and on a brand site it often points at a renamed commercial family.

@font-face {
  font-family: 'Brand Sans';
  src: url('/assets/bs-regular.woff2') format('woff2');
  font-weight: 400;
}

The real name lives in the file's name table, which every OpenType font carries. Download the .woff2 from the Network panel and open it in a browser-based inspector such as FontDrop! or Wakamai Fondue, or read it locally with fontTools:

pip install fonttools brotli
ttx -t name bs-regular.woff2

nameID 1 and 4

The family name and the full name, as the foundry published them.

nameID 0

The copyright notice - usually the foundry's name and a year.

nameID 8 and 9

The manufacturer and the designer.

nameID 13 and 14

The licence description and a licence URL, when the foundry filled them in.

Some web builds strip or rewrite the name table to discourage exactly this. When it is empty, the OS/2 table's four-letter vendor ID often survives and still points at the foundry.

Can you use the font once you know what it is? #

Identifying a font and being licensed to use it are different questions. A font file served to your browser is licensed to the site serving it, for that site. Copying it out of the Network panel into your own project is not covered by that licence, whatever the file's name table says.

The honest next step is the foundry or the catalogue: an open-licence family can be used directly, and a commercial one has a web licence you can buy. If the name table names a designer but no foundry, a search for the designer usually finds the specimen.

Why do font identifiers from screenshots guess wrong? #

Screenshot identifiers compare glyph shapes in an image against their own catalogue. That works for a clean specimen of a well-known family and fails in predictable ways on a real page:

• The answer must be in their catalogue. A custom brand face, or a family the service does not carry, comes back as its nearest neighbour - stated with the same confidence as a correct match.
• Rendering changes the shapes. Antialiasing, hinting, small sizes, letter-spacing and synthetic bold all alter what the matcher sees.
• Neo-grotesques differ in a handful of glyphs. Helvetica and Arial are told apart by the leg of the R, the spur on the G and the angle of the terminals - in a screenshot of five words, those letters may not appear.
• A variable font has no single shape. An instance at weight 450 does not match any static weight in a catalogue.

A screenshot tool is the right one when a screenshot is all you have - a poster, a PDF, an app. When the page is open in front of you, the browser already knows the answer and there is nothing to guess.

How LoupeKit answers it for the whole page #

DevTools answers per element, which is slow on a page with four families and a dozen weights. The UI tab's Extract view reads the whole document once: every family the page renders, the weights actually painted rather than merely declared, whether each comes from Google Fonts, Adobe Fonts, the site's own origin or the system, and a link to the foundry or specimen page when the source exposes one.

• Fonts ranks the families by how much of the page's text uses each, and puts a candidate onto the live page so you can compare it in real paragraphs.
• Font faces lists every @font-face declaration beside what the page actually uses, so a declared-but-unused weight stands out.
• Font loading names the faces that never arrived, fell back, or only render because the font happens to be installed locally.

For a single stubborn glyph, Rendered Fonts in DevTools is still the authority - it is the one view that reports per glyph.