CODEWITHSUNDEEP
cssfontsinternet-explorer-8font-face
user2780318
user2780318

Reputation: 1

CSS @font-face working for one font but not another <= IE8

I have successfully used the font face declarations for two fonts and it works for all browsers except IE8 and below. I am using the code from http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax. The strange thing is on IE8, one font is working and the other is not. Here is the CSS:

@font-face {
    font-family: 'FreestyleScriptRegular';
    src: url('freescpt.eot'); /* IE9 Compat Modes */
    src: url('freescpt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('freescpt.woff') format('woff'), /* Modern Browsers */
         url('freescpt.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('freescpt.svg#FreestyleScriptRegular') format('svg'); /* Legacy iOS */
    }


@font-face {
    font-family: 'GillSansMTCondensed';
    src:url(Gill_Sans_MT_Condensed.eot);/* IE9 Compat Modes */
    src: url('Gill_Sans_MT_Condensed.eot?#iefix') format('embedded-opentype'),
         url('Gill_Sans_MT_Condensed.woff') format('woff'),
         url('Gill_Sans_MT_Condensed.ttf') format('truetype'),
         url('Gill_Sans_MT_Condensed.svg#GillSansMTCondensed') format('svg'); 

}

The FreestyleScriptRegular is not rendering correctly but the GillSansMTCondensed is. I have tried everything I can think of and every hack I can think of. I even used regenerated the eot file for the font concerned using a different application but it didn't make any difference.

Is there anything peculiar to IE8 that would prevent the second font from working? Any ideas?

Thanks

Upvotes: 0

Views: 458

Answers (3)

Jennifer
Jennifer

Reputation: 1

Just from looking at the code you posted, the following does not have single quotations:

src:url(Gill_Sans_MT_Condensed.eot);/* IE9 Compat Modes */

while your code here does:

src: url('freescpt.eot'); /* IE9 Compat Modes */

Try removing the quotations to make it read as such: 

src: url(freescpt.eot); /*IE9 Compat Modes */

Hopefully this will help you resolve your problem.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201738

The Gill Sans MT font is protected by copyright, and use as downloadable font via @font-face is not permitted. Some browsers technically enforce this legal restriction.

Consider trying to find a suitable free font instead, or a font that can be licensed for a fee for the intended use.

Upvotes: 1

Deryck
Deryck

Reputation: 7668

This may be keeping your CSS from rendering properly:

url('freescpt.ttf')  format('truetype'), /* Safari, Android, iOS */

There is an extra space between url('freescpt.ttf') and format(. Try removing that and see what happens. Don't forget to empty all caches.

Upvotes: 0

Related Questions