80

Imagine I have the following CSS

font-family: 'Non-existant Sans', Arial, sans-serif;

Assuming 'Non-existant Sans' is not installed on the system, Arial will be used by the browser. Using Chrome, is there any way of finding out which font is being rendered?

Edit: Dave (in the comments to the question) has pointed out a similar question. I'm specifically asking about Chrome here. Many of the answers in the other question suggest extensions which are okay, however; is there a native way of determining this information using the Dev Tools alone?

Edit Sept 2013: The Chrome team have just announced that font-family inspection is now available in the latest builds of Chrome Canary (Twitter link contains an image with more info). This should trickle down through dev > beta > stable over the next few weeks – great news!

Liam Newmarch
  • 3,935
  • 3
  • 32
  • 46

4 Answers4

118

In Google Chrome devtools in the 'Elements' tab, under 'Computed':

Magic paper roses hello kitty

mikemaccana
  • 110,530
  • 99
  • 389
  • 494
Jürgen Paul
  • 14,299
  • 26
  • 93
  • 133
  • 27
    In Chrome 34.0.1847.116, the rendered font is listed in the Computed tab all the way at the bottom. The section is called "Rendered Fonts". Also you have to select a specific element which has text, otherwise it will not show. – iheartcsharp Apr 16 '14 at 15:44
  • 1
    What does mean "69 glyphs" after the font name? – agad Sep 19 '14 at 12:08
  • @agad It seems to mean that, within the selected element, that many glyphs (letters, numbers, spaces - characters, in other words) were displayed. – Geoff Sep 22 '14 at 21:08
  • Note also, you'll need to enable the shadow DOM view (see dev tool settings) if the text in question is inside an input element. – inopinatus Aug 28 '15 at 01:47
  • 5
    @agad (and for future readers) Those numbers tell you how many glyphs of the current text come from each font in the font stack. A 'glyph' is the specific visible symbol representing a given character (so if you have the letter 'B' in three different fonts, they're all the same character but they use three different glyphs.) Font fallbacks are computed on a per-character basis, so if the default font doesn't have a glyph for the current character, it will look for one in each successive fallback font. This means a given text element can sneakily be using glyphs from multiple fonts at once. – endemic May 15 '17 at 22:37
9

I'm a bit late to the party but I've just discovered a very simple way to debug which font your browser is using.

In the 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 (I add random letters) while keeping an eye on the text in question. 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.

I assume something similar is possible in most dev tools

Voilá

Iolo
  • 2,142
  • 3
  • 16
  • 17
5

If you don't want to use a plugin there is a bookmarklet that will tell you this (once activated and you hover over said text):

http://chengyinliu.com/whatfont.html

Seb Ashton
  • 692
  • 5
  • 16
0

Your 'Non-existant Sans' can be rendered with @font-face in your css. http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

I don't know of a way to detect font rendering, so I don't technically answer your question. I did find this: http://webdesignerwall.com/tutorials/css3-font-face-design-guide it's a javascript called Modernizr that ensures if a browser doesn't support @font-face then it will load fallback fonts such as Arial and Helvetica.

Noah Rainey
  • 73
  • 6