views:

346

answers:

4

I've been doing front end development for a long time, and I have NEVER come across a bug like this before...

Save the following HTML to a file and view it in Firefox (mine is 3.6.3):

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <style type="text/css">
    body { font-family: Helvetica, Sans-Serif;}
    h2 {font-weight: normal;}
    </style>
</head>
<body>
     <h2>Some normal text <strong>some bold text</strong> weird huh?</h2>
</body>
</html>

If you don't want to give it a shot the output is like your cat walked across your keyboard while character map was turned on, except in the strong tags.

I feel like this may be a font issue? When I get rid of font-weight: normal it goes back to normal, but I don't want everything to be bolded in my h2... Anyone have any ideas? More importantly, is anyone able to reproduce this??

Thanks.

EDIT

Here's a screenshot. It works fine in all other browsers, and all text that has not previously been set as bold (normal text) renders fine.

+2  A: 

This is may be due to a strange version of Helvetica loaded on your machine. Try disabling that font locally and see what happens.

Jeff Fohl
weird... i don't even have "helvetica" in my comp... wtf
Jason
OK. Maybe it is the reference to "Sans-Serif" then. I believe it should be "sans-serif" (no caps).
Jeff Fohl
Also, try checking to see what your browser has set for the default "sans-serif" font. It may be that font is screwy.
Jeff Fohl
i deleted "sans-serif" altogether, no dice...
Jason
What do you have set for your default font? Check Tools > Options > Content in Firefox.
Jeff Fohl
@jeff fohl default font is Times New Roman
Jason
Jeff Fohl
+4  A: 

Have you checked your encoding?

When you remove Helvetica or Sans-Serif and replace them with other fonts, do you have the same problem? For example, have you tried using another fonts and then combinations of Helvetica and Sans-Serif with those:

Courier, Helvetica

Courier, Sans-Serif

Vivin Paliath
`<meta http-equiv="content-type" content="text/html; charset=utf-8" />`
Jason
A: 

Looks like this is something to do with the encoding (and not font). Check your encoding as it is decided by firefox: View -> Character Encoding. Is it UTF-8?
Does changing it to anything else (say Western (ISO8859-1)) change the characters?

Can you try disabling your addons, especially the theme and check (start firefox in safe mode)? Perhaps some add on is meddling with the encodings...

Nivas
+4  A: 

This seems to be something Helvetica specific. Here is a number of reports with screenshots that look exactly like your case.

They mention workarounds. On server side:

  • if the CSS definition defines the font family using font: instead of font-family:, this bug does not occur.
  • when setting the font-family by way of font-family: (instead of by font:), the error only occurs once you're showing fonts over 20pixels in size. It doesn't matter if the font size is set by way of em or px, but once the actual display size is over 20px, it gets garbled.

On the client side, it seems to be recommended to remove or re-install the Helvetica font. Can you check your fonts folder for any HELVETIC.TTF or similar files?

Pekka
i tried the `font:` setting in my CSS... still garbled. i don't even have a HELVETIC.TTF in my fonts folder
Jason
@Jason Really strange. You definitely have *no* Helvetica in the fonts folder, neither TTF nor OpenType nor Type1?
Pekka
i have some helvetica neue fonts... where to i get a helvetica font? everywhere i look it's like $30... shouldn't it be on my machine already?!
Jason