The quick answer
The font a website uses is in its CSS, but the first name in font-family is not always the one you see. If that font fails to load, the browser moves down the list. To know what visitors actually see, look at the rendered font.
1. Check Rendered Fonts in Chrome DevTools
Right-click the text and choose Inspect. In the Elements panel, open the Computed tab and scroll to the bottom: Rendered Fonts names the face Chrome actually drew, and how many glyphs came from it. This is more reliable than the font-family line, which is only a list of fallbacks.
2. Use a font finder extension
A font finder reads the same information without DevTools. With PikSpec, open the page, choose Analyse and click the text in Inspect; Styles then lists every family on the page with its sizes and weights, and marks the face that actually rendered.
3. Read the whole type scale
One sample rarely tells you the system. Note the family, size, weight and line height for the main heading, the section headings, the body text and the small labels. Many sites use one family for headings and another for text, and weight matters as much as the face.
When the text is an image
None of these methods can read text inside a picture, a logo or a canvas. For that, upload a screenshot to an image font identifier such as WhatTheFont or Font Squirrel's Matcherator.
Can you use the font you found?
Check its licence before you use it. Fonts from Google Fonts are open-source and free for commercial use. Many brands use a custom or commercial face (their own typeface, or one licensed from a foundry), and using it needs a licence from its owner, even when the files are easy to download from the site.
If the font is licensed, use a free face with similar proportions. For a geometric grotesque, try Figtree, Manrope or Inter Tight; for a wide display face, Archivo. PikSpec suggests the closest free match automatically when you export tokens or build with AI.
Questions
Why does the CSS font-family not match what I see?
font-family is a list of fallbacks. If the first font fails to load or lacks a character, the browser uses the next one. Rendered Fonts in DevTools, or PikSpec, shows the face that was actually drawn.
How do I find the font on a website for free?
Chrome DevTools is free and built in: Inspect, Computed, Rendered Fonts. PikSpec’s font finder is also free.
What if the website uses a custom brand font?
You can identify it, but you usually cannot use it without a licence. Use a free font with similar proportions instead.
Contact PikSpec
Email support@pikspec.com for support, privacy requests or content reports.