Menu
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:
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.
330
Chrome Developer tools can show you the exact rendered fonts for a given web page with just a few clicks. Right click on any element in the page and select Inspect. Next head over to the Computed tab, scroll down, and you'll quickly notice the rendered fonts for the page.
Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). If a font-family has more weights available, they are ignored for the purposes of relative weight calculation.
As Firebug is discontinued, here's the way how to get all fonts and their weights used on a page in the Firefox DevTools:
<html> element in thereThis 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:
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
