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

Question

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?

Solution 1

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

Solution 2

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

Solution 3

The best way so far

You can actaully do rightclick: inspect > Application (on the top tabs) > Frames (scroll on the left tabs) Then you can find a Font section where all loaded fonts are listed. It lists all fonts that are loaded in any possible secure way.

The best part is that, It also previews them on the right, to make it even easier to find the one

Then you can right-click on the one you chose and click open in a new tab, and it downloads it. Then you can add a .woff at the end of the filename and use it anywhere you like. (you can get its extension on the bottom of the preview too)