Website review
This review may include AI-generated content and is not individually verified. Domain, certificate and other facts come from the observed data on this page.
What is WhatFont?
WhatFont is a free browser extension that identifies fonts on web pages. Click its toolbar button, point at any text, and it shows the font's name, size, weight and color; click to pin the details and press Esc to finish. According to the site, it works on every website and has been used by 3 million people.
It is aimed at designers, developers and anyone who spots a typeface they want to reuse. It runs in Chrome and other Chromium browsers such as Edge, Arc and Brave, as a Safari extension on Mac, and in Safari on iPhone and iPad. For other browsers, a bookmarklet version is offered, though some sites block bookmarklets.
A practical next step: install it, open a site whose typography you admire, and check one heading and one paragraph to confirm the font, size and weight before copying the style into your own project.
How do I use WhatFont to identify a font on a webpage?
Activate the WhatFont extension from your toolbar, then hover over the text you want to inspect. The tooltip shows the font's name, size, weight and color. Click to pin those details so they stay visible while you compare nearby text, and press Esc when you're finished.
Step by step
- Install WhatFont in Chrome (or a Chromium browser such as Edge, Arc or Brave), or in Safari on Mac from the Mac App Store.
- Click the WhatFont button in your browser toolbar.
- Point at any text on the page; read the name, size, weight and color in the tooltip.
- Click to pin the details, then press Esc to exit.
On iPhone or iPad, select text in Safari and tap WhatFont to see its font. If you use another browser, drag the bookmarklet to your bookmarks bar and click it on the page you're viewing; some sites block bookmarklets.
Practical example
You spot a headline you like on a design blog. Activate WhatFont, hover the headline, and note the family name and weight. Then hover the body paragraph to see whether the site pairs it with a different family or just a lighter weight. That comparison tells you whether you need one font or two before you rebuild the look elsewhere.
For more detail on a named font, look it up on Google Fonts or Adobe Fonts to check available weights and licensing.
When it falls short
WhatFont reports what the page renders, not where the font file came from or whether you're allowed to reuse it. If the name looks generic or the text is inside an image or canvas, the tooltip won't help; inspect the page's developer tools or ask the site owner instead.
Does WhatFont work on browsers other than Chrome, and how do I install it?
Yes. WhatFont is not Chrome-only: the site says it runs as a Chrome extension that also works in Edge, Arc, Brave and other Chromium browsers, as a Safari extension on Mac from the Mac App Store, and on iPhone and iPad by selecting text in Safari and tapping WhatFont. For anything else, there is a bookmarklet you drag to your bookmarks bar and click on any page, with the caveat that some sites block bookmarklets.
Installing by browser
| Where you browse | How you get it | Practical note |
|---|---|---|
| Chrome, Edge, Arc, Brave and other Chromium browsers | Install the extension from the Chrome Web Store | One install covers the Chromium family; the toolbar button is how you start it |
| Safari on Mac | Install the Safari extension from the Mac App Store | Needs enabling in Safari's extension settings, as Mac App Store extensions generally do |
| Safari on iPhone and iPad | Use the Safari version, then select text and tap WhatFont | Selection-based rather than hover-based, so it suits checking a passage you can highlight |
| Any other browser | Drag the bookmarklet button to your bookmarks bar, then click it on a page | Works without an install, but some sites block bookmarklets |
Using it once installed
Click the WhatFont button in your toolbar, then point at any text; it reports the font's name, size, weight and color. Click to pin the details and press Esc when finished. On iPhone and iPad, the flow starts from selected text instead.
A concrete case: you are rebuilding a competitor's landing page in Firefox and want to match its headline. The bookmarklet is the quickest route, but if that site blocks bookmarklets, open the page in a Chromium browser or Safari and use the extension there. If you only need one font name occasionally, the bookmarklet avoids installing anything; if you inspect type across many sites, the extension's toolbar button is the smoother habit.
Can I use WhatFont on my iPhone or iPad, and how does it work there?
Yes. WhatFont is available for iPhone and iPad as a Safari extension, so you can check fonts while browsing in Safari on those devices.
On mobile the flow is different from the desktop version. Instead of hovering over text, you select the text in Safari, then tap WhatFont to see the font details. Desktop WhatFont works by clicking the toolbar button and pointing at text, which shows the font name, size, weight and color; on iPhone and iPad the select-then-tap method replaces that pointing step.
A few practical notes:
- It runs in Safari, so it won't help inside other iOS browsers or apps that don't use Safari extensions.
- Selecting text is the trigger, so it suits checking a headline, paragraph or label you can highlight — not decorative text rendered as an image.
- If you mainly want to identify fonts on a desktop browser, the Chrome/Chromium and Mac Safari versions follow the hover workflow described on WhatFont.
Next step: install it from the App Store on your iPhone or iPad, open a page in Safari, select a piece of text you like, and tap WhatFont to confirm the name, size, weight and color before you try to match it elsewhere.
What font details does WhatFont show, such as size, weight, and color?
WhatFont shows the font name, size, weight and color for text you point at. The page's own description is that you click the toolbar button, hover over any text, and it reports those four details; clicking pins the details so they stay visible, and Esc dismisses them.
What each detail is useful for
- Name: The main use case the page describes—identifying a typeface you like on a site you don't control, so you can look for something similar or the same.
- Size: Practical when you're rebuilding a layout and want to match a heading or body scale rather than guess from a screenshot.
- Weight: Helps you tell a regular from a semibold or bold cut, which matters because many families have several weights that look alike at small sizes.
- Color: Useful for capturing the exact text color, including subtle grays that are hard to sample by eye.
Limits worth knowing
The page lists only these four properties, so treat it as a quick inspector rather than a full typography audit. It does not claim to report line height, letter spacing, font files or licensing, so for a faithful reproduction you would still check those in browser developer tools. Availability also varies: the extension is offered for Chrome and Chromium-based browsers and for Safari on Mac, with a Safari route on iPhone and iPad, plus a bookmarklet fallback for other browsers—though the page notes some sites block bookmarklets.
Next step
If you're matching a style, note the name, size, weight and color while pinned, then compare the family's available weights before committing; if the site uses a licensed font, plan a close free alternative rather than assuming you can reuse the file. For a second opinion on a typeface's identity, Google Fonts and Identifont are established places to cross-check.
How can I find out what font a website uses without installing an extension?
You can identify a website's fonts without installing anything by using the browser's built-in developer tools or a bookmarklet. Both let you inspect the live page, so the font you see is the font actually in use.
Use your browser's developer tools
This works in every major browser with no install:
- Right-click the text you're curious about and choose Inspect (or press F12 / Ctrl+Shift+I, Cmd+Option+I on Mac).
- In the panel that opens, look at the Styles or Computed tab.
- The
font-family,font-size,font-weightandcolorrules appear there. The top entry infont-familyis the one applied; the rest are fallbacks.
This is the most reliable method because it reads the page's own CSS. The trade-off is that it's fiddly on a page with many nested elements, and you have to know which element to click.
Try a bookmarklet
A bookmarklet is a small "bookmark" that runs a script on the current page. The site behind WhatFont offers one: you drag a button to your bookmarks bar and click it on any page, then point at text to see its font. This is lighter than developer tools for quick checks on a single heading or paragraph.
Two caveats: some sites block bookmarklets, and a bookmarklet can't run on browser pages or PDFs. The site itself notes the blocking issue.
Choose based on your task
| Situation | Better option |
|---|---|
| Checking one heading or paragraph quickly | Bookmarklet |
| Auditing several elements or reading full CSS | Developer tools |
| Site blocks bookmarklets, or you're offline | Developer tools |
| You want the font name only, no setup | Either; both are free |
A useful next step
Pick the largest heading on a page you like, right-click it, and open Computed. Copy the font-family value into a font-finding site such as Google Fonts or Fonts In Use to see close matches and where they're used. If the site uses a paid font, the CSS often names it directly, so you can search for it by name rather than guessing from appearance.
User reviews (0)