CODEWITHSUNDEEP
cssinternet-explorer-8
Hello Universe
Hello Universe

Reputation: 3302

Custom fonts not rendering in IE8 or IE7

My custom fonts do not render in IE7 or IE8. I am getting crazy trying to figure out what went wrong. Here is my css code

@font-face {
    font-family: 'NeutraTextDemi';
    src: url('customfonts/neutratext-demi.eot');
    src: url('customfonts/neutratext-demi.eot?#iefix') format('embedded-opentype'), 
         url('customfonts/neutratext-demi.woff') format('woff'), 
         url('customfonts/neutratext-demi.ttf')  format('truetype'),
         url('customfonts/neutratext-demi.svg#NeutraTextDemi') format('svg');
}

You will notice the difference if you open the file in let's say Chrome and IE8. I went through other Stack Overflow issues and solutions. However I can't seem to solve this at all.

Upvotes: 0

Views: 3120

Answers (2)

Hello Universe
Hello Universe

Reputation: 3302

I think I have found the solution. It has nothing to do with my css code or the generators. I received the files from the client. However the font in quetion violates terms and condition if tried to be converted to eot format. and most generator just breaks when tried to convert to eot format for that particular file. As a result, my option is to go back to the client and ask for another set of fonts or ask them to do the conversion themselves. Thanks everyone for your tries. Sometimes, one should not downgrade before looking at whether it is actually a valid question or not. As a dev, it was a valid question for me. I struggeled for few hours before realizing the problem. The problem is with the t&c of the fonts itself which provides it from being converted. Thanks everyone

Upvotes: 2

Sunil Kumar
Sunil Kumar

Reputation: 1796

In Internet Explorer 8 and earlier, the URL must point to an Embedded OpenType (EOT) file (.eot or .ote format). No other font formats are supported.

I used Arialblack.ttf for for below sample:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 26, 2013 */

@font-face {
    font-family: 'arialblack';
    src: url('ariblk-webfont.eot');
    src: url('ariblk-webfont.eot?#iefix') format('embedded-opentype'),
         url('ariblk-webfont.woff') format('woff'),
         url('ariblk-webfont.ttf') format('truetype'),
         url('ariblk-webfont.svg#arialblack') format('svg');
    font-weight: normal;
    font-style: normal;

}

You may want to read this solution

Upvotes: 4

Related Questions