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);