Q:

Script to find all fonts used on a page

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?

A:

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

A:

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

A:

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:

