Make all text with font Helvetica have the font Arial in jQuery

Question

I need some jQuery magic that will look for all text on a page with a given font (say Helvetica), and change the font of only that text to something else (say Arial).

Answer 1

This should work, I checked it on my site and it changed font properly.

$('body').filter(function() {
    return ( $(this).css('font-family').indexOf('Helvetica')>-1);
}).css('font-family', 'Arial');

Answer 2

If everything were defined via CSS, have you ever thought of spawning your own @font-face definitions, overriding Helvetica?

For example, if everything is defined to render in Helvetica, like in this statement:

* {

    font-family: Helvetica;

}

You may then append a @font-face statement to your style sheet, which would now look like this:

@font-face {

    font-family: 'Helvetica';

    src: local('Anivers-Regular'),
     local('Anivers Regular'),
     url('typeface.Anivers.Regular.otf') format('truetype');

}

It works on in-line-styled elements like <h4 style="font-family: Helvetica;">aw</h4> too.

In that way, everything Helvetica would be automagically rendered in (, e.g.,) Anivers, and this snippet works with or without double quotes. List PostScript name, Full name + style, then an URI for cross-browser compatibility. If the fallback is on Helvetica, this CSS magic would work. Plus, you get free performance overhead in this way since the browser, instead of your script, does the substitution for you.

Unfortunately, Internet Explorer hates .otf files for no apparent reason and you would need an utility called ttf2eot just in case.

—

This is an ugly hack and shall live in your production code for too long.

By the way, what’s the scenario and why would you want to do this — substituting a better-looking typeface with an inferior one?

If you later changed your mind and would like to use the “real” Helvetica somewhere else, you will have to swizzle it under another name. Tedious work isn’t it.