javascript - Script to find all fonts used on a page

Question

Is there easy way to parse a HTML page to find all the fonts used (or all the font stacks used)?

Or similarly, is there a script that parses a page and returns which CSS rules are included and used or included and are not used?

Examples:

If I parse index.html, I want to know that 2 font stacks are used: font-family: Georgia, serif and font-family: Arial, sans-serif.

Or, if I parse index.html, I want to know that lines 10, 12, and 15 of style.css are used.

I imagine somewhere someone has created an app for this? Anyone know of anything?

Answer 1

Thanks to some of the responses above, I put together a tool to list all unique font stacks and then highlight all DOM elements using a specific font stack, if desired.

Here’s the file; there are a couple of examples at the top showing different ways to use it: https://gist.github.com/macbookandrew/f33dbbc0aa582d0515919dc5fb95c00a

In short, download and include the file in your source code, or copy/paste it into your JS console, then run console.log(styleInPage('fontFamily')); to get an array of all unique font stacks.

Example output on stackoverflow.com:

Array[3]
    0: "Arial, "Helvetica Neue", Helvetica, sans-serif"
    1: "BlinkMacSystemFont"
    2: "Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif"

Then to highlight all elements with a specific font stack, run highlightInPage(4) (pass in the 0-based array key from the array above). To clear all highlights, run clearHighlights().