Font-face not working in IE, otf font

Question

I know this was asked multiple times, but I couldn't get it to work after trying them. This is the simple CSS I am using to import a custom font. Also, I am using this with bootstrap.

@font-face {
    font-family: Montserrat-Black;
    src: url(Montserrat-Black.otf);
}

It's not working in IE11 itself. Please help me out. Thank you.

Answer 1

Internet explorer use eot format (legacy) or woff. See MSDN

Anyway i use this code for maximum compatibility:

@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 */
}

Answer 2

Try using .eot file format for Internet Explorer. Something like:

@font-face {
    font-family: Montserrat-Black;
    src: url('Montserrat-Black.eot');
    src: url('Montserrat-Black.otf');
}

Answer 3

IE11: If you are receiving the CSS3114 error code in dev tools, you need to modify the first bits of the font file. This will allow IE to install the font.

Npm Module: You can use ttembed-js npm module, which will make the modifications for you. https://www.npmjs.com/package/ttembed-js

Usage: ttembed-js path/to/Montserrat-Black.otf