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

Answer 4

If you're having this issue and your application is running on IIS, try to add the correct MIME-types in your web.config, as SO-user Martin Buberl explained in this comment

Answer 5

Since this question was the first hit in my search, let me offer the solution I found:

Paul Irish's Bulletproof @font-face Syntax

Or just use the generator at FontSquirrel.com http://www.fontsquirrel.com/fontface/generator They also provide the "one CSS syntax to rule them all" in the font-kit that they create.