Internet-Explorer – We have tried IE font issues and solutions

I noticed that you are missing the «local(‘☺’)» attribute in the CSS declaration. Please see 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

< p>This little trick solves the problem with the Sofia font, but unfortunately, it does not apply to the Didot font. I can assume that the font was originally not a web font or has copyright, and fontsquirrel cannot convert it.

< p>The following is only my personal opinion.

When using fonts, try to put all @font-face declarations in CSS files in the same directory that contains all font files, and then link such CSS files Go to your document.

Example:

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

< p>This not only makes it easier to find the @font-face of the application, but also avoids the use of relative/absolute paths in the url(‘myfont/font.ttf’) attribute.

I know this is a common problem, I have tried almost all the solutions I can find, I want to know if it would be more useful to show some code.

Question

I am trying to implement 4 fonts for the client. Use font-squirrel to generate the current file. However, for IE 7/8, the font does not work at all, and part of it works on IE9.

The cross-browser rendering of the font itself is not a problem, I just want it to display.

What we tried

We (in the company where I work) spent a lot of time doing it The following things:
-We found multiple grammars, and the font squirrel is more complete.
-Reload the CSS in JavaScript (applicable to old projects) a few seconds after loading the page.
-Check all grammatical problems .
– Check for 404 errors
– Use the same name, but with different font weights
– Try to add? #iefix and the specific format used

Screenshot

Sample code

You can see it at http://dev.phin.fr/fontsie/< /p>

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!

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

I noticed your declaration in CSS The «local(‘☺’)» attribute is missing in 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 solves the problem of Sofia font, Unfortunately, it does not apply to Didot fonts. I can assume that the font was originally not a web font or copyrighted, and fontsquirrel cannot convert it.

The following is just my personal opinion.

When using fonts, try to put all @font-face declarations in CSS files in the same directory that contains all font files, and then link such CSS files to your file.

Example:

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

This not only makes it easier to find the application@ font-face, you can also avoid using relative/absolute paths in the url(‘myfont/font.ttf’) attribute.