How to Tell Which Font Chrome Is Using

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

Per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.

This answer original referenced the "Font Finder" plugin, but only because it was from 4 years ago. The fact that old answers linger like this and the community cannot update them is one of the few remaining failures of Stack Overflow.

How to know which font is used by browser from CSS font-family list?

In firefox-developer-tools, Inspector > Fonts tab displays "Fonts used" by the currently inspected element. Edit fonts MDN

In google-chrome-devtools, Elements > Computed tab displays "rendered fonts"
for the currently inspected element. "Even if its name isn’t in the font-family list." whats-that-font , Hackernoon

Firefox :-

Chrome :-

Thanks, @xuemind for suggested edit

How can I determine which font in font-family my browser has matched?

I use http://www.chengyinliu.com/whatfont.html it's a Chrome extension which is really nice when I don't feel like inspecting the code. Just click a button and it displays in a tooltip what font / font size a font is just by clicking the text.

How can I determine which font file is being used, not just the font family?

To answer my own question, Nikul Khatik gave the correct answer. Chrome dev tools doesn't support this feature, but Firefox's does:

So use Firefox to get the actual font face that's used for an element.

Determining Which Web Font Is Rendered In Chrome

You can try the following chrome extension:
WhatFont

or you can also check Computed Styles in Chrome's Inspector

Where to see font files loaded by chrome in the inspector?

You can view the downloaded web fonts using the Network tab:

How do I interact with @font-face definitions using the Chrome debugger?

(1) I don't think you can. @font-face merely adds a new font to the set of available fonts. Given an element that has a font-family: Foo, the dev tools don't seem to provide any information about the origin of the font (whether it's available locally or downloaded via a @font-face rule). You would have to manually search for @font-face rules in the style sheets of the page and write down which font names are "external". (You can do that by going to the "Resources" tab of the dev tools, and typing "@font-face" into the search box.)

Btw, you can view which external font-files are available to the web-page, by going to the "Resources" tab in the dev tools, and expanding the Fonts directory. Each file in this directory represents one @font-face rule.

(2) You can't use the "New Style Rule" method because @font-face is not a style rule, but an at-rule. In order to add a @font-face rule to the web-page, go to the "Resources" tab in the dev tools, select a style sheet (.css file) in the Stylesheets directory, and copy-paste the @font-face rule into that style sheet. Now, you can start using the newly added font name immediately in your font-family properties.

---

Related Topics