I am currently using Firefox, latest version that is 3.0.11 at the time of writing, and I encountered a strange problem on some sites, one of which is the famous Smashing Magazine. The headings were displayed using weird characters, or what it would seem, special characters. You can see a screenshot below.

At first, I thought it was a problem with character encoding. Changing to UTF-8 did not solve the problem, nor did switching off Auto-Detect from View menu – Character Encoding solve anything. Well, basically, after a lot of trying out solutions, it was not a problem with charset or encoding.

I tried other solutions but none seemed to work. One of them gave me a clue as to what the problem is. It was going to Tools – Options – Content – (Fonts & Colors) Advanced – (uncheck) “Allow pages to choose their own fonts, instead of my selections above”. This rendered all pages without custom fonts, except my default of Times New Roman. The problem was solved.

The workaround indicated that the problem resided with my fonts. I thus went and checked out the website source and the stylesheet and found out that Smashing Magazine uses Helvetica font as primary font for h2 tags. This line was found in the source and stylesheet respectively (I shortened the code with …’s):

<ul class="topic-list">
<li>
<h2><a...> ... </a></h2>

ul.topic-list h2{font:44px Helvetica,Arial, ...}

If you don’t know, Helvetica is a proprietary font and doesn’t come with installs of Windows by default. It didn’t come with mine, on both my XP and Vista installs, so I’m assuming it doesn’t come by default.

The Solution:

So what can you do? Apparently, nothing. You cannot acquire the Helvetica font for free and install it. Unless you are willing to pay for it, you are stuck.

Now, if you are crafty enough, you can use some Google powers and try to find the font by… let’s just say, alternative means. I am not posting links here, because I do not encourage piracy. I managed to find a copy of Helvetica somewhere, installed it and problem was solved. You can see the results below.

If you do want to do what I did, you just need to find a copy of Helvetica from somewhere, install it, restart Firefox and the problem should be solved.

Another plausible solution would be for sites with such problems to substitute their fonts for those people do have on their machines. But we cannot require this from site designers. Another way would be to be able to find an addon or similar for Firefox that would allow for font substitution. If you know of such a solution, you are free to share it with us.

A bit of strangeness here is that, since Firefox did not find Helvetica on my machine, it should have used Arial. I cannot understand why it did not.

If you do install the Helvetica font and still get the problem, maybe it’s another font being used and that you don’t have.In this case: check the website source, find which element it is, search the stylesheet for that element, find which font it is and install the font. Restart Firefox, and the problem should be solved.

Hope my solution helps. That’s it! Kinda easy, wasn’t it?

Note: I uninstalled Helvetica after I tested the solution, for those of you who were interested! 😛