Replace only a specified font in Chrome

I find Georgia taxing, as it's become all the rage on too many websites in the last year or so. I've got custom stylesheets set up in Chrome to tweak a number of sites I like, but it becomes prohibitive to make a custom stylesheet for every site, and I really only want to do a replacement where they've used Georgia. Equally annoying is popping up the inspector whenever I change a page to set the fonts again. Anyone know how to do this? Alas, there doesn't seem to be a plugin that has this—either they replace all the fonts on a page, or are too narrow in focus.

If there's nothing out there, I may consider writing a bookmarklet to do just this, and perhaps eventually expand that to plugin(s) for the various browsers, but I'd rather not duplicate work someone else has already done.

Create a Chrome extension that examines the tags listed in the array types into any page you open, if process found a node with the style attribute font-family equal to fontin it will be replaced that with fontout.

Create a new folder named, for example, myplugin
In the folder, create a new file named manifest.json and add this code inside:

{
  "name": "Font change",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Font change.",  
  "content_scripts": [ {
      "all_frames": true,
      "exclude_globs": [  ],
      "include_globs": [ "*" ],  
      "js": [ "script.js" ],
      "matches": [ "http://*/", "https://*/", "https://*/*", "http://*/*" ],
      "run_at": "document_end"
   } ],
  "permissions": [ "tabs", "http://*/", "https://*/", "https://*/*", "http://*/*", "contextMenus" ]      
}

In that folder create a new file named script.js and add this code inside:

var types = new Array("textarea","input","div","h1","h2","h3","span","p");
var fontin ="Verdana";
var fontout = "\'Courier New\'";

(function(){    
    chrome.extension.sendRequest({
        set:"font"
    },function(response){
        for(var i=0;i<types.length;i++){        
            var node = document.getElementsByTagName(types[i]);
                for(var y=0;y<node.length;y++){                             
                    if(node[y].style.fontFamily==fontin){
                       node[y].style.fontFamily = fontout;
                }
           }
        }
  });
})();

Go to Chrome menu » Settings » Extensions.
Now we click on the button "Load unpacked extensions".
Finally we mark our folder and click on the open button.

You can see that the system is very simple, and you can customize the file script.js with your own control code. In the future you may add other scripts, CSS, configuration pages, etc.

Remember that every time you make changes in the file script.js you should reload the plugin with
Ctrl+R.

Also you can get a more detailed guide about how to create Chrome extensions.

Replace only a specified font in Chrome

Related

Recent Posts