Detect Fonts Bookmarklet

Oftentimes when optimizing sites, the Chrome Coverage comes in handy for finding unused CSS/JS, and felt the need for a similar functionality for identifying unused fonts. Before reinventing the wheel, ran a search and found Dylan Maxe had contributed a nice implementaion for this exact usecase.

Since it’s so useful, thought it is worthy of a place in the bookmarks bar in the development browser.

Drag df.js to your browser bar*

Press it when you need to list out all the fonts used by the particular page you’re optimizing, and use that information to remove the unused ones.

A good next step to get ideas for removal, is by going to the Chrome Network Panel and filtering by Font. You might discover fonts loaded without showing up in the list of in-use fonts.

* How to install a bookmarklet?

Screenshot of the output from running the detect fonts bookmarklet in the browser console.

Screenshot of the console output