2

When I do Inspect Element on an HTML element in a webpage, I can see the font-family statement

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;

but is there any way I can determine which of the fonts my browser has matched, that is, whether it managed to find Arial or Helvetica?

If my browser could not supply Arial or Helvetica fonts, how do I determine which font it used to match the generic font category?

PARTIAL ANSWER

I now at least have an answer to the second part of my original question, which was:

Where are the font category default fonts defined? I can set a default font for 'serif', 'sans-serif' and 'monospace' in the settings for Chrome or Firefox, but not for 'cursive' or 'fantasy'.

The answer is: in Firefox, go to about:config. There are preferences here for font.name.cursive.x-western and font.name.fantasy.x-western. If you change the Value of these preferences this will change the browser default font for the font category. (I don't know about other browsers.)

(This answer was as a result of these links: http://forums.mozillazine.org/viewtopic.php?f=7&t=223294 and http://shallowsky.com/blog/tech/web/firefox-cursive-fantasy.html)

Monkeybrain
  • 766
  • 5
  • 23
  • Don't be impatient :-) Someone else might come along with a better answer. Also I need to read your links and try the procedure you suggested, which I haven't done yet. – Monkeybrain Dec 01 '16 at 17:31

2 Answers2

2

Yes as you said you can do inspect element to find that. Apart from that, In Firefox, the Page Inspector Font view will let you do that.

Same as for Chrome Web Inspector, go to the font stack in the CSS pane of the Elements Panel. Then, starting with the top of the stack, change the name of the font while observing the text. When you change the one in use you will see the text change font as it falls back to the next one in the stack.

Also read this posts:

How do I tell which font chrome is using

detecting which font is used in a web page

Community
  • 1
  • 1
StackUseR
  • 884
  • 1
  • 11
  • 40
2

I use http://www.chengyinliu.com/whatfont.html it's a Chrome extension which is really nice when I don't feel like inspecting the code. Just click a button and it displays in a tooltip what font / font size a font is just by clicking the text.

oompahlumpa
  • 495
  • 2
  • 10
  • WhatFont is great, thanks for this. It doesn't tell me which font is in use if it matches the default font category (e.g. 'serif') but that's not a problem for me. Also WhatFont works as a bookmarklet on Firefox. – Monkeybrain Dec 03 '16 at 00:25