IE8 @font-face is not working when define not only eot

Question

In this case everything works well and font displayed right:

@font-face {
    font-family: 'CalibriRegular';
    src: url('fonts/calibri.eot');
}

But when I add other formats, font is not displayed in IE8:

@font-face {
    font-family: 'CalibriRegular';
    src: url('fonts/calibri.eot');
    src: url('fonts/calibri.eot') format('embedded-opentype'),
         url('fonts/calibri.woff') format('woff'),
         url('fonts/calibri.ttf') format('truetype'),
         url('fonts/calibri.svg#CalibriRegular') format('svg');
}

What's the problem? Thanks

Answer 1

When I've used @font-face in the past I've used the following;

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

}

The only difference I can see is the #iefix appended to the end of the second .eot declaration. Does this fix it for you? I've never had issues with IE7+ using this.

Answer 2

You need a hash, usually ?#iefix for convention, on the eot that appears in the multiple src list. This explains why: How does ?#iefix solve web fonts loading in IE6-IE8?

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