4

I know this is a common problem, I tried pretty much every solution I could find, and I wondered if showing a little bit of code would be more useful.

The issue

I am trying to implement 4 font-faces for a client. The current files have been generated with font-squirrel. However, the fonts are not working at all for IE 7/8, and partially working for IE9.

The cross-browser rendering of the font itself is not the problem here, I just want it to be displayed.

What we've tried

We spent (at the company I am working for) a lot of hours doing the following :
- Multiple syntaxes we found, the font-squirrel one being the more complete.
- Reloading the CSS in JavaScript, seconds after the page is loaded (worked for an old project).
- Check all the syntax issues.
- Check if there was a 404 error
- Putting the same name, but witfh different font-weight
- Tried to add ?#iefix and the specific format used

Screenshot

enter image description here

Sample Code

You can see it live at : http://dev.phin.fr/fontsie/

Syntax

@font-face {
            font-family: 'DidotBoldItalic';
            src: url('fonts/DidotHTF-24BoldItalic.eot');
            src: url('fonts/DidotHTF-24BoldItalic.ttf') format('truetype'), url('fonts/DidotHTF-24BoldItalic.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }

Thank you!

Séraphin Hochart
  • 193
  • 4
  • 14

2 Answers2

1

I took the liberty of downloading all the files and code from your example.

I notice that you are missing the «local('☺')» attribute in your CSS declaration, take a look at the third line of the following example:

@font-face {
    font-family: 'SofiaProBold';
    src: url('Sofia-Pro-Bold.eot');
    src: local('☺'), url('Sofia-Pro-Bold.ttf') format('truetype'), url('Sofia-Pro-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

You can see the result in IE8 (PC) at http://imageftw.com/uploads/20130116/font-fix.png

This little trick fixes the problem for the Sofia font but, unfortunately, does not work for the Didot font. I can assume that the font is not originally a web font or has copyrights and fontsquirrel fails to transform it.

The following is only my personal opinion.

When working with fonts, try to put all your @font-face declarations in a CSS file within the same directory that has all your font files and then just link such CSS file to the <head> of your document.

Example:

/fonts/myfont/myfont.css « add to the document's <head>
/fonts/myfont/myfont.woff
/fonts/myfont/myfont.eot
/fonts/myfont/myfont.ttf
/fonts/myfont/myfont.svg

This will not only make easier to find the @font-face applied but will also avoid the use of relative/absolute paths within the url('myfont/font.ttf') attribute.

EOZyo
  • 126
  • 1
  • 10
  • Perfect! It's working on IE7 and IE8. Still not rendering in IE9 for some reason (might be a licensing/corruption issue), but I used another font instead! Merci! – Séraphin Hochart Jan 18 '13 at 15:46
0

Please go here: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

IE 6, 7 and 8 will not work. The inconsistencies between each browser's rendering of a font is a commonly known problem. It appears to me -- based off your screen shot -- that the modern browsers are rending about as well to be hoped. All the webkit-based browsers (safari, chrome, and opera) should be closer in their rendering to each other than firefox or ie 9 separately.

cliffbarnes
  • 1,396
  • 11
  • 21
  • Thanks! The rendering is not a issue (it is, but doesn't really matter for now). The font-face is working for other fonts on these version of IE. – Séraphin Hochart Jan 16 '13 at 19:53