Css @font-face not working in ie9

Question

I managed to use a custom font which works in every browser that deserves to be called "browser". Well as always the cool things do not apply to ie (in this case ie9).

I tried the following:

@font-face { font-family: Roboto; src: url('../fonts/roboto/Roboto-Regular.ttf');}

after some hints i found on this on google i tried:

@font-face { font-family: Roboto; src: url('../fonts/roboto/Roboto-Regular.ttf');
                              src: url('../fonts/roboto/Roboto-Regular.ttf#') format('truetype');
                              font-weight: normal;
                              font-style: normal;}

still with no success. Well as i know by experience there will be no "good" solution for this problem but maybe someone found another bad ie hack that gets me out of another ie misery.

Answer 1

You need to add the format .eot in order to be recognized by IE9.

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

source