2

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

When I browse around, I sometimes find a page where the text looks particularly good. I then right-click on it and pick "Inspect Element" (Chrome) or "Inspect Element with Firebug" (Iceweasel/Firefox).

That brings up a panel where I can see the styles in effect for that element and I can also see the computed style. Something like for Stack Overflow itself:

font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;

My question is: how can I know which of the four font families my browser is using?

If there had only been one font family it would have been easy, but best practice is to include more than one font family and in particular one of generic font families like sans-serif or serif. That means that it's not immediately clear what font my browser is using.

Knowing what font my browser is using would allow me to better understand if it's a typical font that I can expect to find on many systems, or if I've been "lucky" because I have, say, Liberation Sans on my system and the hinting on that font is particularly good.

Community
  • 1
  • 1
Martin Geisler
  • 72,968
  • 25
  • 171
  • 229
  • `Arial` probably 99% of OS have this one ;D – veritas Feb 26 '12 at 21:39
  • Hm, that's unusual. `Arial` is usually at the end of the list (`.., Arial, sans-serif;`). – Šime Vidas Feb 26 '12 at 21:43
  • @Šime Vidas: Liberation Sans and DejaVu Sans are probably only there as fallbacks for OSes that don't have Arial (as it's a proprietary font). – BoltClock Feb 26 '12 at 21:46
  • There is a pending enhancement request for this filed against Web Inspector (upstream for Chrome Developer Tools): https://bugs.webkit.org/show_bug.cgi?id=37451 – Alexander Pavlov Feb 26 '12 at 21:47
  • BoltClock: The question is probably NOT dupe since Martin is likely interested in determining font from _web-page_ -- e.g. to be able to adjust styles dynamically depending on actual font available on specific machine (different fonts has different visual density). Martin: AFAIK, there is no way for web-page script to determine what exact font from specified CSS-list is used. There are JS-scripts that make _assumptions_ on what font is used based on differences in width of same characters in different fonts, but such methods are approximate by nature and therefore generally unreliable. – Marat Tanalin Feb 26 '12 at 21:53
  • Thanks for the quick responses! @MaratTanalin: I'm afraid I wasn't thinking of determining the font with JavaScript or something clever like that — the browser plugins mentioned in the linked answer will be fine. – Martin Geisler Feb 27 '12 at 06:47

0 Answers0