CODEWITHSUNDEEP
csstwitter-bootstrapfontsfont-faceinternet-explorer-11
Kristie Matthew
Kristie Matthew

Reputation: 275

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.

Upvotes: 11

Views: 27611

Answers (5)

Germano Plebani
Germano Plebani

Reputation: 3625

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

Upvotes: 19

richb-hanover
richb-hanover

Reputation: 1091

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.

Upvotes: 0

Wessel van der Weide
Wessel van der Weide

Reputation: 44

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

Upvotes: 0

Arlo Carreon
Arlo Carreon

Reputation: 441

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

Upvotes: 3

cakan
cakan

Reputation: 2117

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

Upvotes: 6

Related Questions