Firefox displays weird characters as headings (solution)

by
Inf

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.

Smashing Magazine with weird characters

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.

Smashing Magazine Problem Solved

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! 😛

  • Pingback: XkiD | Firefox displays weird characters as headings (solution) | blog.xkid.ro()

  • Unless you are willing to pay for it, you are stuck.

    *Cough* *Cough*

    I uninstalled Helvetica after I tested the solution
    Oh, how kind! 😛

    Nice post btw, I hope someone with the same problem find the solution here.

  • InF

    @Yashvin: I did mention:

    […] try to find the font by… let’s just say, alternative means.

    Though I have to agree, Helvetica is out of price! :/

  • Austin

    Surely this can’t be the solution? I have sites of my own that specify Helvetica for a header and it works fine. And the browser is supposed to go to Arial next, right?

    I haven’t been able to figure out what the heck is going on here, it doesn’t appear to be the encoding and Helvetica substitution works fine on other sites.

    This also only showed up for me when I upgraded to 3.5.

  • InF

    I had the same questions Austin, and the only way I got it to work was to install the Helvetica font on my PC (which I didn’t had when the problem occured).

    And as I mentioned above, Arial substitution should have theoretically occured.

    I’ve had that same problem with other sites previously, though I can’t remember which ones exactly. It’s not only a problem on Smashing Magazine, that I can be sure of.

    I also tried various encodings, like UTF8 and Western ones. Didn’t do a thing. Must be something’s up with Firefox’s font substitution or something.

    Maybe I should have mentioned in the title that it’s more of a workaround than a solution. Sorry for that.

  • Austin

    Oh no worries. A workaround is certainly better than nothing, so thanks for that!

    If I somewhow figure out how to fix this I’ll come back and post the fix here, though, since this is the top Google result for this issue as far as I can tell.

  • InF

    You’re welcome to post a fix! 🙂

    Hope to see you around Austin.

  • Austin

    Did some looking around… this is apparently a very old bug, supposedly fixed several times. Some bug reports come from as early as 2005 and as far back as late 2008. I’m not too optimistic about it being fully fixed anytime soon now. If you read around on the bug tracker, it’s almost always blamed on the user and not on Firefox… even though every other browser and even previous versions of Firefox work fine. Maybe if you contacted Smashing Magazine? I know they’re pretty popular and highly visible.

    Your spam filter wouldn’t let me add the Mozilla bug tracker links… but there’s a lot, believe me.

  • InF

    Ah am sorry… The spam filter on GS is a bit strict. I hate spams!

    I’ll try contacting smashing magazine and tell them. Maybe they can do something. Let’s wait and see.

    Now that you mention it, the problem wasn’t there in Firefox 2 as far as I remember. It started with Firefox 3. Curiously, Internet Explorer works fine, and even Chrome. So it must probably be a problem with Firefox’ font substitution not kicking in.

  • I had the problem where I was getting small squares in the Firefox tab. I tried what you suggested and not all is working great.

    Thank you. Although I knew Firefox wasn’t broke, I like seeing the name of the site instead of those pesky boxes.

  • Oops, that should read, “NOW” all is working great….

  • avsky

    Hmm.. I started getting this problem recently but on my own sites were fonts used to work perfectly. It’s a damned nightmare!

  • InF

    @Avsky:

    You have to check if you have the proper fonts. Maybe they were corrupted or got their names changed. I once had this problem. A font was installed under different names. Impact (I think) was installed as SegoeUI, so imagine what the Vista interface looked like.

    Also, check that you are using the proper encoding on. This can cause problems too.

  • terdhair

    The problem resides with Firefox. That’s the source– blame it.

  • terdhair

    To be more informative rather than being critical and against of the commentary flow, I will give some input: Firefox has trouble rendering Helvetica and Helvetica Neue as a header (i.e. h1, h2).

  • InF

    @Terdhair: Interesting. Hadn’t thought that maybe Firefox had trouble with Helvetica as Headers.

    But if there really was a problem, how come installing the font just solves the problem? You think it’s some kind of corrupted font file, or some incorrect font-Firefox’s Setting mapping?

  • Scaramouche

    Inf,

    Thanks for covering this. Did some digging and found this thread over at Mozilla – http://support.mozilla.com/en-US/forum/1/702002. Apparently, it has something to do with the bitmap in the font not displaying at certain sizes. The person wrote that to prove it zoom out and you will see the weird characters becoming normal. Zoom in – I found – and the whole page soon becomes garbled. Solution – to discard the font and let Firefox find another or get better versions of the font. Since I, like Inf, didn’t have Helvetica on my system, it stills begs the question why would Arial display that way if Firefox is displaying the fonts in their proper order.

    I had thought – going along your logic, Inf – to make a copy of Arial, rename it Helvetica, then Firefox would display “Helvetica” which would really be “Arial”. Keeping the original “Arial” would allow it to be displayed when it is ever called. Discovered you can’t rename fonts. Wonder if anyone knows how to rename a font or if this would work.

  • InF

    @Scaramouche: Interesting! Didn’t find that thread myself, but it contains some good information, specially about the zoom.

    You can’t just rename fonts. I think they have some embedded data inside the file, apart from the file name to identify the font.

    You could try a font editor and see if it works.

    Oh btw, I forgot to specify. Under Windows 7, the problem of garbled character no longer occurs. Someone must have fixed the scaling problem. I don’t know if it’s Win7 or that I’m (still) using FF 3.5.x.

  • It appears that Firefox relies on some registry entries in windows that tell it which fonts are available. Sometimes the fonts once were available, so it attempts to run the file. This is remedied by erasing said registry entry.
    HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts\Helvetica (TrueType)

    Alternatively, if you’re lazy put this in the file fix.reg(select save as all in notepad) and run it:
    Windows Registry Editor Version 5.00

    [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts]
    “Helvetica (TrueType)”=-

  • InF

    @Thaoh: Interesting solution. Will try that if the problem returns…

  • djn

    Hi all. Found this page googling about the same problem. Installing Helvetica didn’t help, but uninstalling and old Geneva v. 1.0 did the trick!

  • InF

    Thanks for the contribution! 🙂