Script To Find All Fonts Used On A Page

March 31, 2024 Post a Comment

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

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

Solution 2:

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]);
                elseif(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];


//shimif![].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;
    }
}

Solution 3:

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]);
                elseif(values.indexOf(val)== -1) values.push(val);
            }
            val_before = getComputedStyle(who, ':before')[css];
            if(val_before){
                if(verbose) values.push([hoo, val_before]);
                elseif(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]);
                elseif(values.indexOf(val_after)== -1) values.push(val_after);
            }
        }
    }
    return values;
}

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

Solution 4:

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

functionlistFonts () {

  let fonts = []

  for (let node ofdocument.querySelectorAll('*')) {

    if (!node.style) continuefor (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 elementsreturn [...newSet(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"]

Solution 5:

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.

Html5 Manual