How to Find Website Fonts: A Step-by-Step Guide for Designers
How to Find Website Fonts: A Step-by-Step Guide for Designers
You're looking at a site with clean, confident typography and you want to know exactly what font that is. Maybe it's a competitive audit. Maybe a client asked "can we do something like that?" Maybe you're just maintaining a swipe file. Whatever the reason, there are a few reliable methods that actually work - and some that waste your time.
This guide covers the ones I use, ordered from quickest to most thorough.
Method 1: Browser DevTools Computed Styles
Open DevTools (F12 or right-click and Inspect), click on any text element, and open the Computed tab in the Styles panel. Filter by font-family.
You'll see something like:
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;The first value is the intended font. Everything after it is the fallback stack. If fonts loaded correctly, the first value is what's rendering on screen.
To confirm what's actually rendering (useful when something looks off from what you expected), use the Fonts tab in DevTools. Chrome, Firefox, and Safari all include it. It lists every font file currently active on the page and which elements are using each one.
The Fonts tab is your ground truth. If font-family says "Graphik" but the Fonts tab shows "Arial", the custom font failed to load and you're looking at a fallback.
Method 2: Hover-to-Identify Browser Extensions
WhatFont (Chrome and Firefox) is the fastest tool for quick checks. Install it, activate it, hover over any text. It shows font name, size, weight, and line height in a tooltip - no DevTools required.
The tradeoff: WhatFont reads computed styles, so it tells you what's rendering but doesn't show the full stack or source URL. Good for identifying fonts fast. Not great for understanding how the type system is structured.
Font Finder is similar but organizes detected fonts by element type: headings, body copy, links, captions. Useful when a site uses three or four different typefaces and you want to see the full picture at once.
Method 3: Reading the Source
When you need to understand not just the font name but how it's loaded, dig into the source. View Source (Ctrl+U on Windows, Cmd+U on Mac) and search for @font-face, googleapis.com, typekit.net, or fonts.gstatic.com.
A typical Google Fonts implementation:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">This tells you the family name, which weights are loaded (400, 600, 700), and the loading strategy (display=swap).
A self-hosted font with @font-face looks like:
@font-face {
font-family: "Söhne";
src: url("/fonts/soehne-web-buch.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}Self-hosted fonts can have obfuscated or hashed filenames, especially if served through a CDN. But the font-family name in the declaration is always readable - that's what you're after.
Method 4: CSS Custom Properties
Modern design systems set font families as CSS variables at the :root level. Open the Sources tab in DevTools, search the main stylesheet for --font, or select the <html> element and filter Computed styles for --font.
A well-structured design system looks like:
:root {
--font-heading: "Roobert", "Inter", sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", monospace;
}This is where the typographic intent of the whole system lives. Instead of inspecting individual elements one at a time, you get the complete font token map in one place. Sites built with component frameworks (Next.js, Nuxt, SvelteKit) almost always set their type scale here.
Method 5: Dedicated Brand Extraction Tools
Doing this manually for one site is fine. Doing it for 15 sites in a competitive audit is slow and error-prone. That's where a dedicated tool earns its keep.
Use Inspect Brand to pull fonts, colors, logos, and favicons from any URL at once. Paste in the URL and you get structured brand data back - font stack, hex values, downloadable assets - without opening DevTools.
The output is structured JSON you can save or integrate into your workflow:
{
"fonts": {
"heading": "Roobert",
"body": "Inter",
"mono": "JetBrains Mono"
},
"font_sources": {
"Roobert": "self-hosted",
"Inter": "google-fonts",
"JetBrains Mono": "google-fonts"
}
}For competitive research across a whole category or client vertical, this cuts the data-gathering phase from hours to minutes.
Reading Font Stacks Correctly
The order of values in a font stack is meaningful:
1. First value: The intended font. If it loaded, this is what's rendering. 2. Middle values: Approximation fallbacks. Often system fonts that share proportions with the primary. 3. Last value: Generic family keyword (serif, sans-serif, monospace). The browser's absolute fallback.
font-family: "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;Reading this: the intent is Neue Haas Grotesk (a licensed font, likely self-hosted), falling back to Helvetica Neue (macOS system font), then Arial (Windows), then any sans-serif.
The fallback chain also tells you something about the design's origin. A Helvetica Neue fallback is a tell for either a macOS-first team or an agency background where that was the default chain. Arial as the first fallback usually suggests Windows-first thinking. Neither is wrong, it's just useful context when you're analyzing a brand's technical decisions.
Variable Fonts
More sites are moving to variable fonts now, which look different in the source. Watch for font-weight with a range instead of a single value:
@font-face {
font-family: "Inter";
src: url("/fonts/Inter.var.woff2") format("woff2 supports variations"),
url("/fonts/Inter.var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
}The 100 900 range means it's a variable font with the full weight axis available. You'll also see font-variation-settings in element styles when a site is using non-standard axis values:
h1 {
font-variation-settings: "wght" 650, "opsz" 32;
}When you see this, the site is using precise axis control rather than named weights. It's worth noting not just the font family but the axis values - they're part of the typographic intention.
What to Do With What You Find
Once you have the font names:
- Licensed foundry fonts (Söhne, Neue Haas Grotesk, Graphik, GT America): You need to license these from the foundry to use them in your own work. Don't copy font files from a site's server, even if you can access them technically.
- Google Fonts: Free and open source. Use them directly via the API or download and self-host.
- Adobe Fonts: Included with Creative Cloud. Check your subscription tier for available weights.
- System fonts (
-apple-system,BlinkMacSystemFont,"Segoe UI"): Already on the device. No hosting, no licensing, no overhead.
For competitive research, you often don't need to use the exact font - you need to understand the typographic direction. A brand choosing Neue Haas Grotesk is making a different statement than one using Lato or Montserrat, and understanding that distinction is what the research is actually for.
---
If you're auditing multiple sites and the DevTools loop is getting repetitive, use Inspect Brand to extract font stacks, color palettes, and brand assets from any URL in one step. It's built specifically for this kind of systematic brand research.