1

I'm having a problem with the display of Helvetica in IE. I first noticed this issue in IE8, but it's continued after upgrading to IE11. When a site is set to use Helvetica, I'll get strange extra characters (using looking like a cross) overlapping other text. If I look at the site in any other browser, the text displays just fine.

My best guess as to what is going on is that I have a wonky version of Helvetica that IE is using. But when I look in Windows>Fonts, I have a lot of them that include the word "Helvetica". How can I tell which font IE is using? Am I on the right track in thinking it's a font file issue?

Here's a page that's not working right, and a screenshot of what I see: http://gorowe.com/pages/get-assessed

Example of bad rendering

rdoyle720
  • 2,940
  • 3
  • 17
  • 19
  • Can you please post the code for that content? I'm curious about what's in there. Please use copy/paste so we get the exact code. – Surreal Dreams Sep 15 '14 at 17:57

1 Answers1

0

To debug the situation I recommend playing with the font-family declaration and fallbacks in the CSS.

So for example, start with a generic font-family like this:

font-family: Helvetica, Arial, "Lucida Grande", sans-serif;

Verify that the problem exists, then try eliminating the Helvetica entry like this:

font-family: Arial, "Lucida Grande", sans-serif;

If the problem still exists, you know that this is not an issue with Helvetica itself. If the problem goes away, you know that Helvetica is the culprit.

If Helvetica itself is causing problems, I would double check the problem exists in all relevant IE versions (at least 9, 10, 11) and operating systems (Vista, 7, 8). Then continue debugging the problem like you would for other IE issues.

EDIT: If you are using webfonts, definitely double check that you are using the recommended font-family declarations for that file. Usually you can just open them up in a text editor and you will see the declaration. You will also need to follow best practices for declarations and fallbacks. Here is a relevant example: Getting web fonts to work in IE10

EDIT 2: This syntax assumes the machine has Helvetica installed as a system font. You might want to research the safety of this assumption. More info here: Internet Explorer automatically switches to compatibility mode (IE9 and IE10)

Community
  • 1
  • 1
bogeylicious
  • 5,071
  • 3
  • 25
  • 17
  • Yep, removing "Helvetica" from the CSS does make the issue go away. I am not using web fonts. – rdoyle720 Sep 15 '14 at 18:51
  • Are you sure there are no syntax errors in the HTML? Also, have you verified that the problem exists on multiple machines? It is possible the problem is machine specific and might be fixed with reinstalling the font or changing the settings. See edit for new resource.- – bogeylicious Sep 15 '14 at 18:56