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

ES2015 way of doing it, also supporting ::before and ::after pseudo-selectors.

function listFonts () {

  let fonts = []

  for (let node of document.querySelectorAll('*')) {

    if (!node.style) continue

    for (let pseudo of ['', ':before', ':after']) {

      let fontFamily = getComputedStyle(node, pseudo).fontFamily

      fonts = fonts.concat(fontFamily.split(/\n*,\n*/g))

    }

  }

  // Remove duplicate elements from fonts array
  // and remove the surrounding quotes around elements
  return [...new Set(fonts)]
    .map(font => font.replace(/^\s*['"]([^'"]*)['"]\s*$/, '$1').trim())

}

When running this on StackOverflow, will return ["Times", "Arial", "Helvetica Neue", "Helvetica", "sans-serif", "BlinkMacSystemFont", "Consolas", "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", "monospace"]