Font-face not working in IE, otf font

问题:

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.

回答1:

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

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

回答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');
}

回答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

回答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

回答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.