Script to find all the fonts used on the page

Question

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

Or similarly, is there a script that parses the page and returns which CSS rules are included and used or included and 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 am parsing index.html , I want to know that lines 10, 12 and 15 from style.css .

I assume someone created an application for this? Does anyone know anything?

Answer 1

developer tools are convenient for these kinds of things, but you can twist them by looping through each 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; } } 

Answer 2

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

Here is the file; there are a few 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.

Sample 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 select all elements with a specific font stack, run highlightInPage(4) (go to the array of arrays based on 0 from the array above). To clear all the highlights, run clearHighlights() .

Answer 3

The highest answer (according to kennebec) does not include :before and :after pseudo-elements.

I modified it a bit 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 4

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

An alternative solution for the developer is a browser extension : Firefox Extensions: Vacuum cleaner selector or Using Css

Chrome Extensions: Unused CSS or Css Remove and Merge

The 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, there is no online tool to extract the entire font from a web page. I created my own tool :

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

This tool can detect all fonts from a URL, as well as determine which websites use a font .

Answer 5

ES2015, also supporting pseudo selectors ::before and ::after .

 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 you run this, StackOverflow returns ["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 6

You want to see all the developer tools that are offered in the main browsers. I dare say that some of them can be expanded programmatically ( Firebug is open source), so most of the hard work has been done for you.

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