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

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().

Answer 2

For your first question you can use a specialized website like https://unused-css.com. Sometimes the css file generated causes problems. The advantage of this tool is that it can crawl all site pages to an overall summary. It will be difficult to achieve with an browser extension (although possible).

An alternative solution for a developer is a browser extension : Firefox extensions: Dustme selector or Css usage

Chrome extensions: Unused CSS or Css remove and combine

Best solution for an experienced developer : Install a free tool from github : https://github.com/search?utf8=%E2%9C%93&q=unused+css

For your second question, no online tool existed to extract all font from a webpage. I created my own tool :

http://website-font-analyzer.com/

This tool can detect all fonts from an url and also detect which websites use a font.

Answer 3

You want to look at all the developer tools that are offered in the major browsers. I dare say some of these can be extended programmatically (Firebug is open source) so most of the hard work has been done for you.

It depends if you want to just see the CSS rules, or if you actually want to use them as input for further processing.

Answer 4

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"]

Answer 5

The top-rated answer (by kennebec) does not include :before and :after pseudo elements.

I've modified it slightly to include those:

function styleInPage(css, verbose){
    if(typeof getComputedStyle== "undefined")
    getComputedStyle= function(elem){
        return elem.currentStyle;
    }
    var who, hoo, values= [], val,
    nodes= document.body.getElementsByTagName('*'),
    L= nodes.length;
    for(var i= 0; i<L; i++){
        who= nodes[i];
        if(who.style){
            hoo= '#'+(who.id || who.nodeName+'('+i+')');
            val= who.style.fontFamily || getComputedStyle(who, '')[css];
            if(val){
                if(verbose) values.push([hoo, val]);
                else if(values.indexOf(val)== -1) values.push(val);
            }
            val_before = getComputedStyle(who, ':before')[css];
            if(val_before){
                if(verbose) values.push([hoo, val_before]);
                else if(values.indexOf(val_before)== -1) values.push(val_before);
            }
            val_after= getComputedStyle(who, ':after')[css];
            if(val_after){
                if(verbose) values.push([hoo, val_after]);
                else if(values.indexOf(val_after)== -1) values.push(val_after);
            }
        }
    }
    return values;
}

alert(styleInPage('fontFamily'));// returns array:

Answer 6

developer tools are handy for this sort of thing, but you can spin your own by looping through every element and looking at its computed style properties.

function styleInPage(css, verbose){
    if(typeof getComputedStyle== "undefined")
    getComputedStyle= function(elem){
        return elem.currentStyle;
    }
    var who, hoo, values= [], val,
    nodes= document.body.getElementsByTagName('*'),
    L= nodes.length;
    for(var i= 0; i<L; i++){
        who= nodes[i];
        if(who.style){
            hoo= '#'+(who.id || who.nodeName+'('+i+')');
            val= who.style.fontFamily || getComputedStyle(who, '')[css];
            if(val){
                if(verbose) values.push([hoo, val]);
                else if(values.indexOf(val)== -1) values.push(val);
                // before IE9 you need to shim Array.indexOf (shown below)
            }
        }
    }
    return values;
}



// sample run:
// return unique values (verbose returns a value for every element that has the style set)
alert(styleInPage('fontFamily'));// returns array:

['Times New Roman',Georgia,serif,cursive,arial,sans-serif,Arial,sans-serif];


//shim
if![].indexOf){
    Array.prototype.indexOf= function(what, i){
        if(typeof i!= 'number') i= 0;
        var L= this.length;
        while(i< L){
            if(this[i]=== what) return i;
            ++i;
        }
        return -1;
    }
}