You've found the perfect website. The typography looks great. The headings are sharp. The body text feels clean and readable. Now you want to know one thing: What font are they using?
At first, this sounds easy. Right-click, Inspect Element, find the font-family, and you're done. In reality, it's usually much more complicated. Modern websites often use multiple font families, variable fonts, custom weights, fallback stacks, and third-party font loading services. Finding the exact typography system can quickly turn into a DevTools rabbit hole.
In this comprehensive guide, you'll learn every way to extract fonts from a website, where each method works, where it falls short, and the fastest way to get the complete picture.
Why People Need Website Fonts
There are plenty of legitimate reasons to identify a website's typography. You might be:
- Designing a similar interface: Studying how industry leaders combine serif headers with sans-serif body copy.
- Creating a design system: Building out your own Figma variables and needing baseline values.
- Building a competitor analysis: Understanding how your competitors position their brand visually.
- Recreating an existing project: Trying to match a legacy design where the original Figma file is lost.
Method 1: The DevTools Approach (Manual)
The most common way to find a font is using Chrome DevTools.
- Right-click the text you want to inspect.
- Click Inspect.
- In the Styles panel, scroll down until you find
font-family.
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}