I just put together a new tool to list all the unique font stacks on a web page, intended to help with diagnose and remove unnecessary webfonts and save page load time.

Usage

Download this file and include in your page source, or copy-and-paste it into your browser’s JS console, then run the styleInPage() function with the CSS style you want to inspect as the parameter.

Examples

// Show all unique font stacks in use on the current page
console.log(styleInPage('fontFamily'));

// Show a list of all DOM elements with their computed font stack
console.log(styleInPage('fontFamily', true));

// Highlight all DOM elements using font stack 8
var fontStacksInUse = styleInPage('fontFamily');
console.log(fontStacksInUse);
highlightInPage(8);