Question

I cannot make font-face work on IE7 and IE8.

The code I used is:

@font-face {
    font-family: 'DroidSans';
    src: url('fonts/DroidSans.eot');
    src: url('fonts/DroidSans.eot?iefix') format('eot'),
         url('fonts/DroidSans.woff') format('woff'),
         url('fonts/DroidSans.ttf') format('truetype'),
         url('fonts/DroidSans.svg#webfont1BSMunJa') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSans';
    src: url('fonts/DroidSans-Bold.eot');
    src: url('fonts/DroidSans-Bold.eot?iefix') format('eot'),
         url('fonts/DroidSans-Bold.woff') format('woff'),
         url('fonts/DroidSans-Bold.ttf') format('truetype'),
         url('fonts/DroidSans-Bold.svg#webfont1BSMunJa') format('svg');
    font-weight: bold;
}
@font-face {
    font-family: 'Lobster';
    src: url('fonts/Lobster.eot');
    src: url('fonts/Lobster.eot?iefix') format('eot'),
         url('fonts/Lobster.woff') format('woff'),
         url('fonts/Lobster.ttf') format('truetype'),
         url('fonts/Lobster.svg#webfont1BSMunJa') format('svg');
    font-weight: normal;
    font-style: normal;
}

I have read these articles:

• http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
• http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
• http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

They all state this solution should be cross browser compatible:

Browser compatibility: Safari, IE 6-9, IE 9 Compatibility Modes, Firefox, Chrome, iOS, Android, Opera

What am I doing wrong? Is there anyone with experience in these things?

I’m testing this here: dev.holiday.ge/xhtml/

Answer 1

.eot files I generated using this website: http://fontface.codeandmore.com/ had problems, and ie 7-8 wasn’t picking them up.
I used http://www.fontsquirrel.com/ and fonts load fine now, with my original code!