How to Inspect Font Family with Google Chrome

It’s a rather common practice to use multiple fonts for a single page on a website. For example, we can write the following: font-family: Times New Roman, Georgia in the CSS rule.

This font family acts as a suggestion for the browser to decide on which font to use – if the first choice fails, use the next one, and so forth. But, how do we know exactly which font the browser is actually using? We can install an extension to do the job, but there is a more accurate built-in feature in Google Chrome.

This feature, at the time of this writing, only comes in Chrome Canary, and not available for the regular Chrome yet. Download Chrome Canary here, and install it on your computer. Now, let’s jump right in and see how it works.

Inspect Font Family with Google Chrome

In this example, we have a fairly standard text block that consists of several paragraphs and headings. In the CSS rule, we set some generic font families, like so.

 h4, h4 {
 	font-family: Verdana, Geneva, sans-serif;
 }
 .demo-wrapper p {
 	font-family: Georgia, serif;
 }
 

Now, in Chrome Canary DevTools, head over to the Computed tab. Scroll to the bottom and you will find the exact font family as well as the sum of glyphs that are being used for the selected element (see screenshot below).

Even when we only specify the typeface (serif and sans-serif ) and not the font family, it can still tell us which font is being rendered on the page (see screenshot below).

Besides that, we can also see the font family that is specified within the pseudo-element and the font that is served with @font-face. Here is an example:

Conclusion

This new tool in Chrome is definitely handy for web developers. We can now easily see which font is being used as well as the sum of glyphs that are displayed. This tool also works well with some webfont services like Typekit and Google Web Font.

I hope you found this tutorial useful, and special thanks to Paul Irish for revealing the feature.