11

I'm using Google webfonts. Initially, I include all the weights of a given family so I can choose all the ones I want. So for example:

  <link href='http://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet'>

Once I'm done, I only want the weights I ended up using to be fetched on page load to minimize size. My finished link looks something like 

<link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,900,900italic' rel='stylesheet'>

I suppose I can scroll thru my entire CSS directory and eyeball all the pages to find all the weights I used, but that's error-prone. At a glance, how can I know exactly, which weights I ended up using?

PS: A few things I tried:

  1. Firebug's Net panel lets you see whether the google fonts script was called but does not specify which weights were used.
  2. Chengyin Liu's very nice WhatFont tool (http://chengyinliu.com/whatfont.html) but that only lets you hover over a single element.

Update April 2020

For what it's worth, I no longer use any of the solutions below, I've been using a Chrome plugin called FontsNinja for a few years and it does an amazing job of pinpointing fonts and weights used on pages.

Heraldmonkey
  • 2,111
  • 2
  • 19
  • 29

3 Answers3

7

As Firebug is discontinued, here's the way how to get all fonts and their weights used on a page in the Firefox DevTools:

  1. Open the DevTools (e.g. via F12)
  2. Switch to the Inspector panel
  3. Select the <html> element in there
  4. In the Inspector panel switch to the Fonts side panel
  5. 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: All fonts of a page in the Firefox DevTools' Inspector panel

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
  • 1
    Thank you this is an incredible resource! I hope this gets marked as the official answer. – jerclarke Jan 14 '20 at 15:28
  • 1
    This is great for each page, but is there another way to check the whole website? – user2012677 Feb 20 '20 at 16:40
  • At least not with the DevTools. This would require to download and interpret all pages and check which fonts are used of a website automatically for which there is no tool, I believe. It might somehow be possible via remote controlling the browser via WebDriver, but honestly, in such cases I'd rather use a minimal-first approach. I.e. only include the fonts and weights I definitely need and then add more when they are needed, or use a [variable font](https://en.wikipedia.org/wiki/Variable_fonts), if possible. – Sebastian Zartner Feb 21 '20 at 00:47
  • Please see my edit to the original question for an update here – Heraldmonkey Apr 27 '20 at 09:17
3
  1. 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:

  1. Open Firebug on your page
  2. Enable and switch to the Net panel
  3. Click the Fonts filter in the panel toolbar
  4. 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.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
  • Ok, I can see the list of fonts that get loaded, and the URL tells me the `font-family` they belong to, but how can I tell what weights are being loaded? They all seem to have random strings. – jerclarke Jan 10 '20 at 19:43
  • 1
    As Firebug doesn't exist anymore, you are probably referring to the DevTools integrated into Firefox. I've created a separate answer explaining how you get the font weight info there. – Sebastian Zartner Jan 12 '20 at 00:39
2

Here is a quick script for pages using Jquery to run in the console which will log all fonts / styles / weights:

var ret={};
$('*').each(function () {
    var str = $(this).css('font-family');
    str = str  + ':' + $(this).css('font-weight');
    str = str + ':' + $(this).css('font-style');
    if (ret[str] ) {
      ret[str] = ret[str] + 1;
    } else {
      ret[str] = 1;
    }

});
console.log(ret);
John Everden
  • 176
  • 8