How can I determine what font a browser is actually using to render some text?
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.
- 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.
Answer
Nowadays Chrome and Firefox have built-in tools for that, but Safari needs you to copy some text and investigate that.
First, select some text. In Firefox, the Page Inspector has a Fonts view:
This will also tell you if fonts were downloaded, and which style is used, such as Regular, ExtraLight, Italic, BoldItalic and all.
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 might be using:
The above screenshots show that multiple fonts might be shown for Unicode text. Chrome tells you 6 glyphes ("Pekka" and the space) are using "Arial", and one ("웃") is using "Apple SD Gothic Neo":
Arial — Local file (6 glyphs)
Apple SD Gothic Neo — Local file (1 glyph)
The actual CSS defines:
font-family: Arial,"Helvetica Neue",Helvetica,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, it shows multiple fonts as well. When in doubt, 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. In this case it would tell you that both browsers used "Apple SD Gothic Neo Regular" for the "웃" character.
Unfortunately, different browsers (and even different versions of a single browser) on the very same machine might use different fonts, due to the font types supported/preferred by a browser. On a Mac, for example, Safari might prefer Apple Advanced Technology while Firefox supports Microsoft OpenType (which might yield problems for Arabic after installing Microsoft Office on a Mac). Or for the "웃" character in the screenshots above, Chrome and Firefox on my Mac nowadays prefer "Apple SD Gothic Neo" (which is OpenType PostScript) but older versions of Firefox used "AppleGothic Regular" instead (which is a TrueType font).
For browsers that do not have a similar 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:
