Typography makes or breaks a design. When you see a website with beautiful fonts, knowing how to identify them can transform your own projects. This guide covers every method to find fonts on any website.

Why Font Identification Matters

The right font communicates your brand's personality. Serif fonts feel traditional and trustworthy. Sans-serif fonts feel modern and clean. Display fonts add personality. Knowing what fonts successful brands use helps you make better typography choices.

Method 1: Browser DevTools

1. Right-click the text you want to identify
2. Select "Inspect" to open DevTools
3. Look in the "Computed" tab
4. Find font-family
5. The first font in the list is what's being used

Tip: Look for fonts like "Inter", "Roboto", "Open Sans" - these are popular Google Fonts.

Method 2: Browser Extensions

Extensions like WhatFont or Fonts Ninja make font identification instant:

• Install the extension
• Click the extension icon
• Hover over any text
• See font name, size, and weight instantly

Method 3: Check the Source Code

Many websites load fonts from Google Fonts or Adobe Fonts. You can find these in the page source:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700">

This tells you they're using Inter with weights 400 and 700.

Understanding Font Properties

A complete font identification includes:

Font Family: The typeface name (e.g., "Roboto")
Font Weight: How bold it is (100-900)
Font Size: In pixels, rem, or em
Line Height: Space between lines
Letter Spacing: Space between characters

Common Font Pairings to Look For

Great websites often use font pairings. Here are popular combinations:

Headings: Playfair Display + Body: Source Sans Pro
Headings: Montserrat + Body: Open Sans
Headings: Poppins + Body: Roboto

Automated Typography Analysis

For a complete picture of a website's typography, automated tools can extract:

✅ All font families used on the page
✅ Font weights (regular, medium, bold, etc.)
✅ Font sizes for each element type
✅ Typography hierarchy (h1, h2, body, etc.)
✅ Line heights and letter spacing

Next Steps After Identifying Fonts

• Check if the font is free (Google Fonts) or paid (Adobe, Fontshare)
• Find similar free alternatives if needed
• Note the font weights used for consistency
• Study the typography scale (size ratios)

Extract Fonts Automatically

BrandSpy extracts all fonts, weights, and typography from any URL in seconds.

Try BrandSpy →