How to identify all weights of all fonts used on page/site
- Firebug's Net panel lets you see whether the google fonts script was called but does not specify which weights were used.
Firefox only loads fonts, which are actually used on the page. And they are just loaded once and then stored in a special fonts cache. So go get to know about which fonts are used on your page, give the Net panel another try:
- Open Firebug on your page
- Enable and switch to the Net panel
- Click the Fonts filter in the panel toolbar
- Reload the page via Ctrl+F5 to circumvent the cache
=> Inside the Net panel you should now see all requests for the fonts listed, which are used on the page.
Note: that the DevTools in Chrome and Opera also show you the used fonts, though they don't seem to have a font cache, so they make requests for them even with a normal page reload (via F5). Internet Explorer (11) is not that smart and always loads all fonts even when they are not used at all.
As Firebug is discontinued, here's the way how to get all fonts and their weights used on a page in the Firefox DevTools:
- Open the DevTools (e.g. via F12)
- Switch to the Inspector panel
- Select the
<html>element in there - In the Inspector panel switch to the Fonts side panel
- Expand the All Fonts on Page panel at the bottom of it
This will show a list of all fonts used on the page. For each web font you can see the @font-face CSS rule that defines it including the font weight information.
See the following screenshot for an example:
