Some of custom font not working with `ie10`

Question

I am using custom font in my webpage. i am using 4 custom fonts, all it works with chrome and firefox but only one font (RalewayMedium) works in ie10 rest not working.. what is the issue?

here is my fonts what i use :

@font-face {
    font-family: 'OpenSansLight'; /*a name to be used later*/
    src: url('../fonts/OpenSans-Light.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'LatoRegular'; /*a name to be used later*/
    src: url('../fonts/Lato-Regular.ttf'); /*URL to font*/
}

@font-face { //only one works!
    font-family: 'RalewayMedium'; /*a name to be used later*/
    src: url('../fonts/Raleway-Medium.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'OpenSansRegular'; /*a name to be used later*/
    src: url('../fonts/OpenSans-Regular.ttf'); /*URL to font*/
}

Answer 1

I guess it's working because you have the Raleway font set in your system.

To make web fonts cross browser compatible, you need to do it like this:

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

Check out this article for more information.