How to identify all weights of all fonts used on page/site

StackOverflow https://stackoverflow.com/questions/23467432

Frage

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.

War es hilfreich?

Lösung 2

  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.

Andere Tipps

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

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);
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top