How to use
01
Paste the URL
Enter the page address and click Detect fonts. The tool fetches the HTML and the linked stylesheets on our server, so the scan usually takes 5 to 20 seconds.
02
Read the roles and fonts
Where each font is used maps fonts to body text, headings and buttons. The Fonts tab shows each family with its source badge, usage count, weights, a preview line and the full fallback stack.
03
Copy, open or pair
Use Name or CSS to copy the family or the whole font-family declaration, open Google fonts on Google Fonts, or open the site's heading and body pair in the Font Pairing Generator.
Why Website Font Detector
- Reads the site's stylesheets, so self-hosted fonts are listed too.
- Maps fonts to body text, headings, buttons and code, with weights and sizes.
- Labels Google Fonts, Adobe Fonts, Bunny Fonts, Fontshare and icon fonts.
- Live preview, copy-ready CSS, type scale and pairing ideas.
Three ways to find the font of any website
There is no single right method. A URL-based detector is quickest for a site-wide list, and your browser's own tools are the most precise for one element. Many designers use both: this tool first for the overview and the role table, then DevTools to confirm the font on a specific heading or button.
| Method | What it reads | Good for | Limits |
|---|---|---|---|
| This detector | HTML and linked CSS from the server | Every font on a site with its role, weight and source, from any device | Misses fonts added by JavaScript after load |
| Browser DevTools | The rendered page | The exact font of one element, as rendered | One element at a time, desktop only |
| Font finder extension | The rendered page | Hovering over text to see its font | Needs installing, works only in that browser |
Common questions
How do I find out what font a website uses?
Paste the URL into the Website Font Detector and click Detect fonts. The role table shows the body and heading fonts, and the badge on each family tells you where it is hosted. To check one specific element, right-click it, choose Inspect, and look at font-family in the Computed panel.
Can I detect fonts from a URL without a browser extension?
Yes. The scan runs from the URL alone, so there is nothing to install and it works on a phone too. The trade-off is that an extension reads the page after it renders, while this tool reads the HTML and CSS the server sends, so fonts added later by JavaScript can be missed.
Can the font detector tell which font is used for headings and which for body text?
Yes. Where each font is used reads the CSS rules for body, p, h1 to h6, buttons, links, navigation and code, resolves CSS variables and the font shorthand, and shows the font, weight and size for each role. It follows the order of the CSS rather than the full cascade, so treat it as a strong hint.
Does the font detector show font weights?
Yes. Weights come from @font-face rules, from the weights requested in Google Fonts links, and from font-weight values in the CSS. They are listed under each font, and detected Google fonts load at those weights in the preview.
Why does the font detector show a fallback font instead of the real one?
The preview can only use fonts your browser has. Google fonts are loaded into the page so their preview is real, but other fonts only show if they are installed on your device. When a site uses a system font stack, the name may be -apple-system or system-ui, which means visitors see their own device's default font.
Can the website font detector identify fonts inside images or logos?
No. It reads font names from CSS, and text inside images, logos or SVG outlines has no font name attached. For those you need a tool that matches letter shapes in an image.
Are the fonts found by the website font detector free to use?
It depends on the source. Google Fonts are released under open licenses such as the SIL Open Font License, and Bunny Fonts serves that same open catalog. Adobe Fonts need an Adobe subscription, and self-hosted custom fonts are often commercial, so check the foundry's license first.
How do I find a font that pairs with the one a website uses?
Look at Font pairing ideas under the results. It lists tested Google Fonts pairings that include the detected heading or body font, and each card opens that pair in the Font Pairing Generator, where you can lock one font and shuffle the other.
Why does a font scan miss some fonts on a website?
Fonts injected by JavaScript after load, stylesheets pulled in with @import, and stylesheets beyond the first 25 are not read. Some servers also refuse our request, and the summary bar shows how many stylesheets were blocked.
What does the Typography tab in the font detector show?
It lists every font-size value found in the CSS with an approximate pixel size, and every line-height value, each with a usage bar. Together they show the site's type scale, which font names alone do not tell you.