Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 630
o_O Avatar asked Sep 19 '13 16:09

o_O


People also ask

How do I know if a font is loaded?

check() The check() method of the FontFaceSet returns whether all fonts in the given font list have been loaded and are available.

How do you find out what font is being used on a website?

Go to webpage where you want to find out the font and click on WhatFont extension. Hover over the webpage. You will find a floating box containing font ,you want to find out.


2 Answers

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

like image 131
cfg Avatar answered Sep 21 '22 12:09

cfg


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

Google Chrome Network tab showing downloaded web fonts

like image 34
Adrift Avatar answered Sep 22 '22 12:09

Adrift