What font is this website using?
There are two ways to find out: ask your browser’s developer tools about one piece of text, or let an extension read the whole page. Both are below.
With Chrome or Edge DevTools (free, one element at a time)
- Right-click the text and choose Inspect.
- In the panel, open the Computed tab and scroll to the bottom.
- Rendered Fonts shows the face the browser actually drew, for example
Manrope (network resource). Thefont-familyline above it only shows what the site asked for, which can be a list of fallbacks.
This is exact, and it is enough when you care about one heading. It gets slow when you want the whole picture: headings, body, buttons, code, and which weights are in use.
With Stylasso (the whole page at once)
Click the icon and Stylasso lists every font the page renders, with the role it plays (heading, body, mono), the weights in use, where it is loaded from (Google Fonts, Adobe Fonts, self-hosted or a system font), and a sample drawn in that font. It ran on three demo sites we built:
- Northwind RoastersHanken Grotesk, body, weights 400, 500, 600Northwind Roasters (coffee shop), from Google Fonts
- Northwind RoastersFraunces, heading, weights 600Northwind Roasters (coffee shop), from Google Fonts
- Northwind RoastersJetBrains Mono, mono, weights 400Northwind Roasters (coffee shop), from Google Fonts
- LedgerlineManrope, heading and body, weights 400, 500, 600, 800Ledgerline (fintech), from Google Fonts
- AfterhoursSpace Grotesk, heading and body, weights 400, 500, 700Afterhours (dev tool, dark), from Google Fonts
The type scale comes with it: each heading and body size with its weight, line height and letter spacing, named on Tailwind's steps.
When the font is not free
If a site uses a commercial font, your project probably has no license for it. Stylasso marks those and names the closest free Google font, and its CSS, Tailwind and DESIGN.md exports load the free stand-in with a comment, so what you build looks close and stays legal.
Questions
Why does DevTools show a different font than the CSS?
CSS lists what the site would like, in order. If the first font fails to load or lacks a character, the browser falls back to the next one. Rendered Fonts in DevTools and Stylasso both report what was really drawn.
Can I download the font files?
Stylasso does not export font files; they belong to the font's owner. It tells you the name and source so you can get the font properly, often free from Google Fonts.
Does it work for images of text?
No. It reads real text on web pages. For a font inside an image or a logo, a font identification service that matches shapes is the right tool.