PhantomJS – find all fonts-families on a web page

PhantomJS (Headless browser javascript library based on webkit) can be used to find the font-families used on a website page using jQuery. This can be used for QA purpose to do some sanity checks. It can also be used to find fonts on few sites for analysis purpose.

Here are the steps to display all unique font-families used on a web page:

1. We’ll be using jQuery for iterating over various DOM elements on the page. First download the jQuery library from any place. Easier is to download it from google CDN site using wget. Here is the command to do it on Linux/Mac:

   wget http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js

2. Then use the jQuery descendant selector to select all descendants of body element. Here is the javascript code snippet for this:

   jQuery("body *").each(function() {
     // ...
   }

3. Use jQuery .css() api to get the font-family property. Note that if font-family is not defined for that element, it is taken from the style of parent element and so on. Here is code snippet for this:

   var fontFamily = jQuery(this).css("font-family");

4. Here is the complete code (font.js) for printing all unique font-families present on a page (infoheap.com in this example):
   

   var page = require('webpage').create();
   page.open('https://infoheap.com/', function (status) {
     if (status !== 'success') {
       console.log('Unable to access network');
     } else {
       page.injectJs('jquery.min.js');
       var fontArray = page.evaluate(function () {
         var jQuery = window.jQuery || window.$;
         var fontArray = {};
         jQuery("body *").each(function() {
           var fontFamily = jQuery(this).css("font-family");
           if (fontFamily) {
             fontArray[fontFamily] = 1;
           }
         });
         return fontArray;
       });
       for (font in fontArray) {
         console.log(font);
       }
     }
     phantom.exit();
   });

5. Assuming you have pahntomjs installed, run the following on command line:

   phantomjs font.js

6. Here is the outcome for site infoheap.com:

   Arial, Verdana, sans-serif
   Arial, sans-serif
   Georgia, 'Times new Roman', serif

Few points to note

1. We are just printing the unique font-families used. You may want to print them by occurrence count, etc.
2. We are injecting jQuery on the page. In case the page already has a jQuery, it should still work.
3. for jQuery injection (or any other javascript) it has to be present in local working directory.