How can I determine what font a browser is actually using to render some text?

Question

My CSS specifies "font-family: Helvetica, Arial, sans-serif;" for the whole page. It looks like Verdana is being used instead on some parts. I would like to be able to verify this.

I've tried copying and pasting from my browser into Word, but it's not preserving the font.

Is there some way to determine which font is actually being used for a section of text?

Firebug will give me the list of fonts as above[1], but I don't see a way to determine which one of the fonts is being used.

1. It turns out the wrong list was being used, which solved my original Verdana problem. But I'm still curious if there's a way to identify the actual rendering font.

Salver

https://mcmap.net/q/119350/-how-to-detect-which-one-of-the-defined-font-was-used-in-a-web-page – Difficulty

FontFinder and WhatFont described in answers below are still very crude ways to detect font used. Both erroneously indicated "Quanttrocentro Sans" (the primary font) when I select an Aghani ؋ symbol which is not available in this font. – Messiaen

@QuestionOverflow, nowadays Firefox and Chrome have built-in tools to determine the font. They will show the font for each glyph, hence will show you what font was used for that ؋ as well. – Wickman

@Arjan: is this still the case in 2020? – Deltoid

@devouredelysium, did you see my answer? Just select a single glyph to see what font is used. – Wickman

@Arjan, what is glyph please? – Retardment

I have created bookmarklets that can guess the font that is being used for the currently selected text (or the body, if nothing is selected). They work really well for me, but they can't tell you what sans-serif actually maps to. Grab them here: alanhogan.com/bookmarklets#font-stack-full – Steelwork

Answer 1

The FontFinder plugin for Firefox does exactly what you want. After installing, highlight a block of text, right click and go to FontFinder -> Analyze Selection. It will tell you the actual font being used as well as a other information like font-family, spacing, color, etc.

---

Note that per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.

Sthenic

That sounds like exactly what I want. Thanks! – Salver

Font Finder seems to ignore @font-face declarations. It also seems to work by guessing at what the browser would choose from the font-family pick list. Can anyone confirm? – Cy

No reason to use this now that Firefox's Tools > Web Developer > Inspector > Fonts tell you (Wilfred Hughes' answer) – Curlicue

@jeremy I agree. In fact, even the currently highest voted answer (user1100745's) references a Chrome extension. But now Chrome now has built-in functionality similar to that in Firefox as mentioned in Wilfred Hughes' answer (see Arjan's answer). – Anyway

Unfortunately, Firefox 47 no longer has the Fonts tab referenced in this blog you linked to : This article has more details – Ader

"Starting in Firefox 47, the Fonts view is disabled by default. We're working on a more fully-featured replacement. For the time being, if you want to see the Fonts view, visit about:config, find the preference devtools.fontinspector.enabled, and set it to true." See developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/…. – Bedell

Apparently, setting devtools.fontinspector.enabled was only needed in Firefox 47: "In Firefox 47 only, the Fonts view is disabled by default. If you want to see the Fonts view in Firefox 47, visit about:config, find the preference devtools.fontinspector.enabled, and set it to true. Before and after Firefox 47, the Fonts view is enabled by default.", @DanielLe. – Wickman

@Arjan, thanks for quoting the latest information. The information I quoted was correct as on Jul 6. The MDN page was subsequently updated twice on Jul 11. Please see developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/… and developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/…. – Bedell

@DanielLe, of course I understood it was correct at the time you copied the text :-) – Wickman

Answer 2

Since many years Firefox and Chrome have built-in tools for that to show all details, but the October 2021 Safari 15.x still needs you to copy some text and investigate that.

Firefox

In Firefox, the Page Inspector that shows after right-clicking some text and choosing Inspect Element, has a Fonts view:

This will also tell you which style is used, such as Regular, ExtraLight, Italic, BoldItalic and all.

Like for the above screenshot:

.SF NS
System Font
Apple SD Gothic Neo
Apple SD Gothic Neo Regular

So, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Just hover a single font name in the inspector to highlight the glyphe(s) that use that specific font. Hovering "Apple SD Gothic Neo Regular" nicely highlights just the "웃":

Hovering "System Fonts" gets me:

For web fonts, it seems Firefox shows the name from the CSS along with details from within the downloaded font. In its "All Fonts on Page" section it also tells where fonts were downloaded from.

For me, in October 2021, Firefox has the best options to determine the font. But: not all browsers may use the same font, so read on!

Chrome

For Chrome, go into DevTools' "Elements", go to its "Computed" tab, and scroll all the way down to the section called "Rendered Fonts". Unlike with Firefox, this only shows the base font name, not any specific style it may be using:

For web fonts, Chrome just shows "Network resource" (where Firefox shows many more details).

Like with Firefox, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Chrome does give you a count of the glyphes that use a specific font within the selected element, but does not support hovering to highlight the glyphe(s) that use a specific font:

.SF NS — Local file (192 glyphs)
.Apple SD Gothic NeoI — Local file (1 glyph)

Safari

The October 2021 Safari 15 has finally introduced a "Fonts" tab, but its output is quite limited. For "Identity" it often shows secondary information such as "TN web use only" (where Firefox shows that as a comment, like in "Interstate Condensed, TN web use only"). Or shows nothing at all. But, finally, it's a start:

This only works for elements. For text nodes (like a single character), the fonts tab is not shown.

For the same example as used above, Safari does not even indicate multiple fonts are used:

Identity
Name .AppleSystemUIFont

So, read on.

Other browsers (and Safari)

For Safari and other browsers that do not have a full fledged fonts view, simply copy & paste a fragment of the text into some word processor or Rich Text editor, select some specific text, and see which name shows up in some font dropdown list. On my Mac, this does not work when pasting from Firefox (where for "웃" Firefox's "Apple SD Gothic Neo" is converted into "AppleMyungjo" on pasting), but works well for Safari and Chrome:

Multiple fonts in a single HTML element

For the above screenshots, the actual CSS defines:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;

But those fonts often don't include many special characters. As the font information works per HTML element, where Unicode text in an element could actually use multiple fonts in its child text node, the developer tools show multiple fonts as well. When in doubt, hover the fonts in Firefox, or in other browsers just double-click the text in the HTML pane and get rid of the text you're not interested in. Then, when selecting the surrounding element again, you'll just see one option.

Different fonts in different browsers

Unfortunately, different browsers (and even different versions of a single browser) on the very same machine may use different fonts, due to the font types supported/preferred by a browser. On a Mac, for example, Safari may prefer Apple Advanced Technology while Firefox supports Microsoft OpenType (which may yield problems for Arabic after installing Microsoft Office on a Mac). Or for the "웃" character in the screenshots above, Firefox and Chrome on my Mac nowadays prefer "Apple SD Gothic Neo" and ".Apple SD Gothic NeoI" (which are OpenType PostScript) but older versions of Firefox used "AppleGothic Regular" instead (which is a TrueType font).

file /System/Library/Fonts/AppleSDGothicNeo.ttc 
/System/Library/Fonts/AppleSDGothicNeo.ttc: OpenType font collection data, 2.0, 18 fonts, at 0x60 OpenType Font data, 18 tables, 1st "BASE"

file /System/Library/Fonts/Supplemental/AppleGothic.ttf 
/System/Library/Fonts/Supplemental/AppleGothic.ttf: TrueType Font data, 18 tables, 1st "cmap", 33 names, Macintosh, Copyright ? 1994-2006 Apple Computer, Inc. All rights reserved.AppleGothicRegularAppleGothic Reg

Note that Chrome (on a Mac) shows a leading dot and trailing uppercase "i" in "NeoI" which are lacking in Firefox for the same example. On that Mac, Font Book shows:

I've not investigated what that entails.

Wickman

Do you know if Safari has a plugin or something for this? – Zoophilia

In Chrome 47, make sure you scroll to the bottom of the Computed section. Expanding the font-family attribute as it appears (in alphabetical order) will not display which font is being loaded. This information appears at the bottom. – Dinny

@Dinny That's some insanity positioning of the font rendered information, only a person with multiple google attempts would find it there. – Press

@Merchako, What happens when your computed font is a generic font like "serif" and "sans-serif"? Then how do you get the actual font? – Roundlet

@Pacerier, in Chrome just scroll down all the way in the Computed tab; in Firefox see the separate tab. – Wickman

@Pacerier, I don't know for sure (I'm kind of surprised that this happened to you). My guess is that, if the browser is telling you that the font is computed as serif, sans-serif, or monospace, then it's actually being displayed as whatever your OS's settings are for each. On my Linux machine, I specifically set serif=Noto and monospace=Inconsolata. On my Mac, I've gone with [the defaults][1]. [1]: webmasters.stackexchange.com/questions/33793/… – Dinny

@Parcerier, on that note, keep in mind that [rare users may replace fonts][2]. On my Linux box, I replace Arial with Roboto because my local copy of Arial is granular and [terrible][3]. As a web developer, there's nothing you can do about this. [2]: superuser.com/questions/116859/… [3]: marksimonson.com/notebook/view/the-scourge-of-arial – Dinny

@Pacerier, my first theory is that you're still looking in the wrong spot. In Chrome, scroll to the bottom of Inspector > Styles > Computed. In Firefox, view Inspector > Fonts. In Safari, I can't find this feature. – Dinny

What does it mean if in Rendered Fonts I just see — Network resource(7 glyphs) (i.e. there is nothing before the dash) ? – Jeddy

@TMG, I could imagine web fonts might not need an alias, but can refer to some URL directly. Is this a public website that we can look at? If not, what does Firefox show? – Wickman

@Wickman Wow, that was really an instant response! Unfortunately this is not made public yet. The font-face attribute is just a name defined by @font-face, where it references src by url. I think more of this information could be displayed in the Rendered Fonts, but anyway at least I was able to to figure out what is happening, thanks :-) – Jeddy

Unfortunately I don't see a Rendered Fonts section at the bottom of computed styles in Chrome 71. Maybe it no longer exists? – Casuistry

@Andy, it's still there, when applicable. So, select some text, right-click, Inspect? – Wickman

@Wickman huh, I wasn't able to get it to work on a div element, at least... – Casuistry

@Casuistry but it works now when selecting some text? (I tested on Chrome 71 and 72 on a Mac.) – Wickman

@Wickman Yes, I've noticed in inspecting the comment elements on here that it will show Rendered Fonts on the div.comment-text element and its descendants, but not on its parent li.comment, even if I add font-family to the li. That's why I was confused. It's hard to tell how Chrome decides whether to show the Rendered Fonts section or not. – Casuistry

Do you know if there is any way to get Chrome to show which specific font is being rendered? The Rendered fonts section just says “Arial” or “Source Sans Pro”, which doesn’t tell me whether it’s rendering using ExtraLight, Light, Regular, etc. Firefox does give this info, but I can’t see it anywhere in Chrome. – Egypt

@JanusBahsJacquet, good question, but I cannot find it either. I did some tests to ensure Chrome is indeed using the font variants even when it's not explicitly listing them, and as expected it surely does use the font's variant from the OS. (Just to ensure that in my tests Chrome is not somehow rendering glyphs, say, bold or italic using its own code rather than delegating it to the font's definition—easily validated by looking at the "a" in, e.g., Times or Georgia.) – Wickman

Aside: the March 2020 Safari Technology Preview still has no option to see the actual font like in Firefox or Chrome. – Wickman

Answer 3

Firefox 22+ will show you which font is currently in use, without any extensions.

Vegetate

Answer 4

You could try checking that specific section with Firebug for Firefox. It should give you all the exact properties.

Amphipod

That still gives me the list, not the specific one it's using... But on a second check, Verdana has somehow gotten into the font-family list, which would be the cause of my original problem. So, thanks. – Salver

Firebug will also tell you which rules are firing to give the element that font - very useful for working out where your CSS is going wrong. – Phelan

Safari 4 Beta has a WebInspector,too (could be a skinned firebug) – Adversity

I think you will always get the complete list, whatever tool you use. The font used is the first on in the list that is installed on your computer. – Amphipod

Firebug currently (1.11.4, maybe also earlier) highlights the current font in blue. – Hydrocephalus

Answer 5

There is no need to use any external browser plugins for that. In order to check which font is really used on the website in Google Chrome, you need to:

• open developer tools (right click on a website and select inspect)
• select desired object within "elements" tab
• select "computed" tab, in the bottom pane you would see "rendered fonts":

Midriff