51

What tab in chrome inspector shows the font files you're loading via font-face? I can't find it under resources. I'm having an issue where one group of font-family files are loading, but another font-family is not. I have checked everything from going directly to the URL and seeing they are indeed present, but I would like to look in the inspector and see it loading the one font-family but not the other. Is this possible with chrome?

o_O
  • 4,862
  • 11
  • 46
  • 84

2 Answers2

53

You can also select any text node in the elements panel, then look at the bottom of the computed styles tab to see what fonts are rendered for that element

Google Chrome styles tab showing computed rendered fonts

Juan Marco
  • 1,806
  • 2
  • 18
  • 22
cfg
  • 678
  • 6
  • 6
  • 5
    This should be the (new) accepted answer! :) I would've never thought to scroll all the way to the very bottom beneath all of those computed properties! I've been looking for this for hours. Thanks @cfg! – jdunk Apr 10 '18 at 21:13
  • Anytime @jdunk, Glad to help. – cfg Jun 26 '18 at 22:14
  • 5
    In the section "Rendered fonts", all I see is "- Network resource (310 glyphs)". What does it mean? – greg Jul 23 '18 at 15:34
  • @greg that means you're at least calling a font from a cdn somewhere, as it's being resources over network and not locally hosted on your machine. It looks like it perhaps doesn't have a name?? – cfg Aug 14 '18 at 20:48
  • 1
    Note that this section will not appear for all elements, only elements containing text as a direct child. So, for example, you will not see "Rendered Fonts" for the `` tag but will see it for paragraph tags, table cells, etc. – GuyPaddock Feb 24 '20 at 20:15
  • Would be nice if it indicated the actual file. – Drazen Bjelovuk Sep 23 '20 at 02:05
  • If someone could use firefox, there is tab in the firefox where we can see all the loaded fonts, if you click on the inspector tab, there is fonts tab. Wonder why chrome does not have such a feature – Srikanth Kyatham Oct 29 '20 at 10:46
48

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

Google Chrome Network tab showing downloaded web fonts

Greg Sadetsky
  • 3,995
  • 1
  • 30
  • 42
Jason Yaraghi
  • 51,338
  • 11
  • 87
  • 88
  • 1
    I see what you mean. It does appear they are there in your screenshot. I fixed my issue and they still don't appear there, although I know for a fact they are being loaded now and used. I'll have to continue searching. The googlefonts are showing there, but fonts located on our own servers are not... – o_O Sep 20 '13 at 18:26
  • 2
    The screenshot shows the loading of the CSS file which points to the fonts, but it doesn't actually show the loaded fonts; just the file that points to them/where to load them from. – CTS_AE Oct 21 '14 at 10:48
  • 1
    If a font is not appearing in the network tab when it should be, make sure the font isn't installed on your computer – diachedelic Mar 26 '17 at 17:05
  • 1
    I discovered that in Chrome 63, the fonts are only actually downloaded if they are used for styling. – Ben Creasy Oct 23 '17 at 17:36
  • 1
    This does not always reflect that the font is being used where you expect it. to know for sure, you need to check for rendered fonts at the bottom of the computed styles tab to ensure the font-family that is being used, and weather or not it is a resource local to your device, or loaded over network through cdn – cfg Sep 21 '18 at 18:24