@font-face and problems with Internet Explorer 11

One of our last steps just before putting a new website online is to check the browser compatibility. When optimizing for Internet Explorer 11, every now and then you discover a new bug and especially the limitations of the browser. Internet Explorer 11 is very outdated, but it is still used for browsing websites. That's why we try to make our websites usable for IE11 as well.

Pretty much every new website uses a font that is not installed by default on the user's device, and this causes problems with the correct view of a website in Internet Explorer 11.

A font can be embedded in a website with the CSS rule @font-face. Thus, the user does not need to have this font installed on his computer. Basically IE11 can also handle this CSS rule - but there are some possible obstacles the browser can't overcome. The desired font is not displayed and a standard font like "Times New Roman" or "Arial" is displayed.

We have collected some possible solutions from practice and hope that one of them will help if you are confronted with this problem.

Solution #1: Remove the woff2 font

In a project of a customer the following CSS rule was declared:

@font-face {
   font-family: "Fontname";
   src: url('../pathToFonts/font.woff2') format('woff2'), url('../pathToFonts/font.woff') format('woff');
}

Removing the woff-2 entry in a separate CSS file for Internet Explorer 11 solved the problem:

@font-face {
   font-family: "Fontname";
   src: url('../pathToFonts/font.woff') format('woff');
}

Solution option #2: Maximum compatibility

You can provide a different format of the font for different browsers / devices, for this purpose use the following code:

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

Many thanks to CSS Tricks from whom this code snippet originally came.

Solution #3: Embeddability of fonts

If you take a closer look at the properties of e.g. a .ttf font file, you will find the attribute "Embeddability of fonts". To do this, right-click on the file -> click on "Properties" and on the "Details" tab.

There are 4 possible permissions that can be in this field:

Installable - Allows fonts to be embedded in the document and permanently installed on the computer.

Editable - Allows fonts to be embedded in the document, but only temporarily installs the fonts on the system.

Print and Preview Only - Allows fonts to be embedded in the document, but only temporarily installs the fonts in the system for printing purposes.

Restricted - Fonts cannot be embedded in a document.

If the Embeddable Fonts attribute is marked Restricted, the font will not be embedded and will not be displayed.

Possible solution #4: Security settings in Internet Explorer

There was a bug report #1197679 which is no longer available on the Microsoft site. There was a version of Internet Explorer 11 that disabled the download of fonts. To embed external fonts you had to enable the download in the Internet Options:

  1. Open Internet Explorer
  2. Click on the gear in the upper right corner
  3. Click on "Internet Options"
  4. Switch to the "Security" tab
  5. In the section "Security level for this zone" click on "Customize level..."
  6. The "Security settings - Internet zone" window opens
  7. Scroll down to the "Downloads" -> "Font download" item
  8. Select the "Enable" option and confirm the window with "OK".

Could we help you?

Did this article help you?
We would be happy to receive your feedback!

Feedback senden