You are browsing a website and the typography catches your eye. The heading font is elegant, the body text is perfectly legible, and the combination works beautifully together. You want to use the same fonts on your own website — but how do you find out what they are?
There are several methods, ranging from browser extensions to built-in developer tools to dedicated online tools. This guide covers every method, when to use each one, and how to identify the font once you have found it.
Method 1: Use a Free Website Font Extractor (No Extension)
The fastest method with no setup required. Go to the Web Asset Suite font extractor, enter the website URL, and the tool detects and names every font loaded on that page — including Google Fonts, Adobe Fonts, and custom web fonts.
How it works:
- Go to webassetsuite.com/extractor
- Paste the website URL
- Select Fonts and click Extract Assets
- The tool returns a list of every font family loaded on the page, labelled by type
When to use it: When you want to identify all fonts on a page quickly, without inspecting source code or installing anything. Works on any browser on desktop and mobile.
Method 2: Browser Developer Tools (No Extensions Needed)
Every modern browser has built-in developer tools that can identify fonts — no extensions required.
In Chrome or Edge:
- Right-click on the text whose font you want to identify
- Click Inspect (or press F12)
- In the Elements panel, the selected element is highlighted
- Click the Computed tab in the right panel
- Scroll down to font-family — this shows the exact font name being applied
In Firefox:
- Right-click the text and click Inspect
- In the Inspector panel, click the Fonts tab
- Firefox shows every font used on the page with a preview
Limitation: This method shows the computed font for a specific element. If you want to identify all fonts used across the entire page, you need to check element by element — which is slow. The extractor tool above does this automatically.
Method 3: WhatFont Chrome Extension
WhatFont is the most popular font identification browser extension, with millions of users. After installing it, hover over any text on a webpage to see the font name in a tooltip.
Pros: Very fast for identifying a single font on a specific element. Shows font size and weight alongside the family name.
Cons: Requires installing a Chrome extension (and granting browser permissions). Only works in Chrome and Edge — not Safari or Firefox. Does not give you a full list of all fonts on the page.
Alternative: The Web Asset Suite font extractor gives you all fonts on the page without installing anything — useful when you want a complete picture rather than identifying one specific element.
What to Do After Identifying the Font
Once you know the font name, the next step depends on which type of font it is.
If it is a Google Font
Search the exact name at fonts.google.com. Click the font family, select the weights you need, and copy the @import URL or link tag. Google Fonts are free for any use including commercial websites.
If it is an Adobe Font (Typekit)
The font is part of Adobe Fonts. You can use it on your website with an active Adobe Creative Cloud subscription, or search for a similar alternative on Google Fonts.
If it is a custom or premium font
Search the exact font name on:
- myfonts.com — the largest commercial font marketplace
- fonts.com — another major commercial library
- fontspring.com — one-time purchase licences
Some brands use proprietary fonts designed specifically for them — you may find a visually similar alternative but not the exact font.
How to Identify a Font from a Screenshot or Image
If you see a font in an image — a logo, a screenshot, a social media post — and cannot inspect the source code, use a font recognition tool:
WhatTheFont (MyFonts): Upload a screenshot of the text at myfonts.com/pages/whatthefont. The AI analyses the letterforms and suggests the closest matching fonts.
Font Squirrel Matcherator: Upload an image at fontsquirrel.com/matcherator to identify the font.
Google Lens: Take a photo or screenshot and run it through Google Lens — it now includes font identification for text in images.
After Finding the Right Font — Building Your Full Typography System
Identifying a great heading font is the first step. To build a complete typography system for your website, you also need a complementary body font and optionally a subheading font.
Use the free font pairings generator to find complementary pairings:
- Lock the font you have identified as your heading font
- Click Generate to cycle through body font alternatives
- Use the live preview to see how the combination looks in a real layout
- Export the CSS with the Google Fonts @import URL ready to paste into your stylesheet
Once you have your full typography system, check all text and background colour combinations meet WCAG contrast standards using the free colour contrast checker.
Quick Summary — How to Find Website Fonts
Related tools: