Search code examples
cssinternet-explorerfont-facewebfonts

The font is not displayed on IE


@font-face {
  font-family: 'Museo-Sans';
  src:  url('../fonts/MuseoSans/MuseoSans-900.otf') format('opentype'),
        url('../fonts/MuseoSans/MuseoSans-900.eot'),
        url('../fonts/MuseoSans/MuseoSans-900.eot?#iefix') format('embedded-opentype');
  font-weight: 900;
  font-style: normal;
}

That is not displayed on the Internet explorer. I take the otf file, convert it to eot, but here I am adding the third line myself. How to convert correctly so that files have this ?#iefix ?


Solution

  • Try using .woff format to make it work in IE11

    @font-face {
        font-family: 'Museo-Sans';
        src: url('../fonts/MuseoSans/MuseoSans-900.eot'); /* IE9 Compat Modes */
        src: url('../fonts/MuseoSans/MuseoSans-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('../fonts/MuseoSans/MuseoSans-900.woff') format('woff'), /* IE 9-11 & Modern Browsers */
             url('../fonts/MuseoSans/MuseoSans-900.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('../fonts/MuseoSans/MuseoSans-900.svg#svgFontName') format('svg'); /* Legacy iOS */
        }