How do I tell which font Chrome is using? [duplicate]

Answer 1

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á

Answer 2

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

Answer 3

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

Answer 4

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.