How to get the actual rendered font when it's not defined in CSS?

Solution 1:

I suggest this function:

function css( element, property ) {
    return window.getComputedStyle( element, null ).getPropertyValue( property );
}

Usage:

css( object, 'font-size' ) // returns '16px' for instance

Note: getComputedStyle doesn't work in IE8.

Live demo: http://jsfiddle.net/4mxzE/

Solution 2:

There is no standard, reliable method for determining the actual font being used. The previous answers here will report the styled fontFamily style value, but that can be a list of font names and doesn't specifically identify the actual font rendered (which was the actual question posed here).

(As mentioned in some comments, there are ways to guess at the font by inspecting visual cues, but that isn’t likely to be 100% reliable.)

Solution 3:

You can find the information about the rendered font in Chrome/Firefox Developer Tools. Try inspecting the paragraph in the following code snippet:

p { font-family: sans-serif;  }

<p>Some text and <span title="an emoji">😁</span></p>

In Chrome Developer Tools (tested on 55.0.2883.75 m 64-bit) you get the following information:

In Firefox Developer Tools (tested on 47.0.2 with about:config > devtools.fontinspector.enabled = true) you get the following information: