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

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


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


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

Google Chrome Network tab showing downloaded web fonts


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

Application tab

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)