@font-face - how to make it work on all browsers

Question

The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.

Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.

This text is from here. So in order to have working @font-face for IE9 I should just specify EOT font file:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

Particularly I am using Myriad Pro, and I have OTF fonts. How I can convert them into EOT type?

And regarding to IE7 and IE8 what trick/hack should be used to obtain the desired result?

Answer 1

I think this is almost fully cross-browser

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

Location is the path on your server, and Name is the font's name