Listing Unique Font Stacks on a Webpage

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