Search code examples
cssfont-face

IE7 displays @font-face character "hyphen" as a square

I have a @font-face problem with IE7. It displays the character - as a square, see this screenshot. Normal text and other special characters as &, / and + etc displays properly.

It works as expected in all browsers I've tested, even IE8.

Has anyone encountered this before, and possibly know of a solution?

The CSS I use to load the fonts is as follows, and I've tried using both text-transform:uppercase/lowercase to see if that was the problem.

@font-face {
font-family: 'rex-bold';
src: url('fonts/rex_bold-webfont.eot');
src: url('fonts/rex_bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/rex_bold-webfont.woff') format('woff'),
    url('fonts/rex_bold-webfont.ttf') format('truetype'),
    url('fonts/rex_bold-webfont.svg#rex_bold_bold') format('svg');
font-weight: normal;
font-style: normal;
}
Solution

  • This seems to be a problem with the Rex fonts. They do not contain “-” HYPHEN-MINUS U+002D (i.e., the common Ascii hyphen). This means that browsers will have to take that character from another font. You can see from the screenshot that the hyphen is of different design – with the stroke thinner as in the letters. The result may vary by browser and its settings, and old versions of IE are notoriously bad here – they may even fail to render the character at all, showing a small rectangle instead, even if there are fonts in the system that cover it.

    To fix this, set some alternate fonts, e.g.

    font-family: rex-bold, Tahoma, Verdana, sans-serif;

    You would choose the fonts so that their hyphen matches the design of Rex Bold. This cannot be perfect, but with some care, you get a better rendering on most browsers.

    Since Rex Bold has all letters designed as uppercase, the hyphen should be uppercase-style, too. Tahoma and Verdana might do. For some modern fonts, you might be able to use font-feature-settings (in browser-prefixed forms) to select such a variant glyph when available, using the case property. I’ve composed a simple test page for testing the effects of such settings. But most fonts lack such nice features, so you should probably just pick up fonts where the hyphen glyph is “high enough” (and bold enough).