Helping Geeks Win the War on Technology Since 2010

Replacement for Firefox Font Replacer Add-on

February 1, 2012

Have you been having issues with your font renderings on Firefox and found numerous tips and references to the Font Replacer add-on only to get to a dead link? You and me both. My personal reason for embarking on this quest was because I had recently installed the Helvetica Neue font on my Windows computer. This is predominantly a Mac font but I was surprised to see how many web developers actually had web styling prioritizing this horrible font over others including trusty old Arial. This causes a horrible user experience for Windows users and personally I wouldn’t alienate the world’s largest OS user base just to be an Apple elitist.

Thanks to Internet Explorer’s font smoothing, the problem was not as bad. However on Firefox it got to be unbearable. With the Font Replacer add-on completely M.I.A. I figured there had to be a Greasemonkey script of some sort that would do the trick and I was right.

Greasemonkey is a great Firefox add-on that lets you basically customize any website you want by injecting or modifying HTML code so you can get things displayed exactly how you like. I won’t go into more details about how great it is, but if you don’t have it you need to install it to get this solution to work.

Download the Kill Helvetica script from userscripts.org and install it as a Greasemonkey script. Simply enable it and you’ll find all web pages using Helvetica Neue will display nicely with Arial instead.

Better yet, you can modify the script if you have other misbehaving fonts that you’d like to replace, just like old Font Replacer functionality. If you take a look at the code, it’s quite easy. Simply replace ‘helvetica’ with the misbehaving font and ‘arial’ with the font you wish to replace. The script is replicated below:

// ==UserScript==
// @name           Kill Helvetica
// @namespace      Hacked from Font Must Die script
// @description    Replaces corrupt and jumbled Helvetica fonts in Firefox. Removes all instances of Helvetica and replaces with Arial by replacing font tags with a CSS-styled span.
// @version     1.7
// @copyright	2010, Daniel P
// @include        http://*
// ==/UserScript==

var tags = document.getElementsByTagName('*');
for (var i in tags) {
        var style = getComputedStyle(tags[i], '');
        if (style.fontFamily.match(/helvetica/i)) {
                var fonts = style.fontFamily.split(',');
                for (var j in fonts) {
                        if (fonts[j].match(/helvetica/i)) {
                                fonts[j] = 'arial';
                        }
                }
                tags[i].style.fontFamily = fonts.join(',');
        }
}

After install, don’t forget to add this user include for secure https connections.
kill helvetica font replacement

posted in Firefox by helpgeek

Follow comments via the RSS Feed | Leave a comment | Trackback URL

Leave Your Comment

 
Powered by Wordpress and MySQL on MDDHosting. Theme by Shlomi Noach, openark.org