Add to ChromeBraveGuide
The quick way: add Fontsight, press ⌥⇧F (Alt+Shift+F on Windows) and point at the text. Without an extension, right-click the text, choose Inspect, and look for the font that rendered: where it is in each browser is below.
Choosing a font finder? Fontsight compared with WhatFont, Fonts Ninja and Fontanello.
Every desktop browser can tell you, in its developer tools. It takes a few clicks and shows the font’s name, but not who made it or what it costs.
The font-family line higher up is the site’s list of choices, not the answer.
Firefox can also show every font on the page, under All Fonts on Page.
On older Safari, the setting is called Show Develop menu in menu bar.
The font-family line is a list of choices. The browser draws with the first one it has, letter by letter, so the same page can render in different fonts on different computers.
And the first name is often made up: a site can load any font as “brand-sans”. To know the font, read the file the page loaded. That’s what Fontsight does.
h1 {
font-family: "brand-sans",
-apple-system, "Helvetica Neue",
Arial, sans-serif;
}Phone browsers have no inspector, and Chrome extensions only run on a computer. Send yourself the link and open it on a computer.
Text in a picture has no font for the browser to report. Crop the letters and try an image matcher such as WhatTheFont or Font Squirrel’s Matcherator.
We’ve measured 202 paid typefaces against free ones, letter by letter. The closest free look-alike usually comes within a few percent.
The quickest way is a font finder extension. Add Fontsight to Chrome, press ⌥⇧F on a Mac or AltShiftF on Windows, and point at the text: it names the font that rendered, who made it and the CSS to use it. Without an extension, right-click the text, choose Inspect, and look under Computed → Rendered Fonts in Chrome, the Fonts tab in Firefox, or the Font panel in Safari.
Use the browser’s inspector. In Chrome or Edge: right-click the text, choose Inspect, open the Computed tab and scroll to Rendered Fonts. In Firefox: Inspect, then the Fonts tab. In Safari: turn on Show features for web developers in Settings → Advanced, then Inspect Element and the Font panel.
The font-family line is the site’s list of choices, in order. The browser goes down the list and draws with the first font it has, letter by letter, so the answer depends on your computer and on which fonts loaded. Rendered Fonts in Chrome, or Fonts Used in Firefox, shows which one won. Fontsight shows the winner and crosses out the ones skipped.
Many sites load a font under their own name, such as “brand-sans”, so the inspector shows that name and not the real one. Fontsight reads the font file the page loaded and names it from the inside: the family, its maker, version and licence.
Text in an image has no font for the browser to report, so neither the inspector nor Fontsight can read it. Use an image matcher such as WhatTheFont or Font Squirrel’s Matcherator: upload a crop of the letters and it suggests fonts that look alike.
Not easily: phone browsers have no inspector, and Chrome extensions only run on a computer. Open the page on a computer instead. On this site’s phone version, the Add to Chrome button sends the link to you so you can pick it up there.
Chrome, and the browsers that install from the Chrome Web Store, such as Edge, Brave and Arc. In Edge, choose “Allow extensions from other stores” when it asks, then click Add to Chrome.
Point Fontsight at any text on any website. It names the font, who made it and the CSS to use it, and finds a free look-alike if it’s paid.
Add to ChromeBrave Free