Geek Answers Handbook

IE Problems and Font-face Solutions We Have Tried

I know this is a common problem, I tried almost all the solutions I could find, and I wondered if it would be useful to show some code.

Problem

I am trying to implement 4 fonts for a client. Current files were created using font-squirrel. However, fonts generally do not work for IE 7/8 and partially work for IE9.

Transversely rendering the font itself is not a problem here, I just want it to display.

What we tried

We spent (in the company I work for) many hours doing the following:
- Multiple syntaxes that we found, and the font squirrel is more complete.
- Reload CSS in JavaScript, a few seconds after loading the page (works for an old project).
- Check all syntax problems.
- Check if there was a 404 error
- A room with the same name, but with witfh in a different font
- Tried to add? #iefix and format used

Screenshot

enter image description here

Code example

You can see it live: 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; }

Thanks!

+4
source share
2 answers

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

I noticed that your CSS declaration is missing the attribute " local ('☺') ", 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 copyright, and fontsquirrel cannot convert it.

The following is just my personal opinion. .

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

Example:

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

This will not only simplify the search for @ font-face, but also avoid using relative / absolute paths in the url('myfont/font.ttf') attribute url('myfont/font.ttf') .

+1
source

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

IE 6, 7 and 8 will not work. Inconsistency between each font browser browser is a well-known problem. It seems to me that this is due to your screenshot - that modern browsers are also obsessed with hoping. All webkit-based browsers (safari, chrome and opera) should be closer to their rendering to each other than firefox or, i.e. 9 separately.

0
source

More articles:


All Articles