11

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.

Kristie Matthew
  • 275
  • 2
  • 4
  • 13
  • Can you put it into a jsfiddle. All I can say is. Are you sure that is the correct location of you font. – Andrew May 28 '15 at 08:45
  • according to http://caniuse.com/#feat=ttf TTF is partially supported in IE11 – iurii May 28 '15 at 09:57

5 Answers5

19

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 */
}
Germano Plebani
  • 3,461
  • 3
  • 26
  • 38
6

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');
}
cakan
  • 2,099
  • 5
  • 32
  • 42
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

Arlo Carreon
  • 441
  • 1
  • 4
  • 11
  • 2
    "you need to modify the first bits of the font file. This will allow IE to install the font." Might need some explanation to how? and which bits and which program to use for it. – Jasper Lankhorst Dec 03 '18 at 08:39
0

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

Community
  • 1
  • 1
Wessel van der Weide
  • 44
  • 2
0

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.

richb-hanover
  • 1,015
  • 2
  • 12
  • 23