@font-face failed OpenType embedding permission check. Permission must be Installable

Question

This exception occurs in here. You can reproduce it in IE11. So far I have not found the cause of the issue. Any ideas why this is being caused?

Answer 1

Fixed by adding

<staticContent>
  <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>

under

 <system.webServer>

in web.config.

Edit:

to prevent any problems with consequent releases I recommend doing this:

<staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>

Answer 2

IE not supports .ttf just use .eot font files

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
  src: url('../fonts/Font-Name.ttf')  format('truetype');
}

Answer 3

@font-face {
    font-family: 'Gotham-Medium';
    src: url('fonts/Gotham-Medium.eot');
    src: local('☺'), url('fonts/Gotham-Medium.woff') format('woff'), url('fonts/Gotham-Medium.ttf') format('truetype'), url('fonts/Gotham-Medium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Notice src: local('☺'),

Answer 4

For documentation or future visitors: In my case I was experimenting this issue with IE11 and .otf fonts, if this is your case read this Can I use case. Basically what it says is that IE11 doesn't support some .ttf and .otf fonts.

The best solution I found was to convert the .otf font to .woff and add the code on Jakub Holovsky's response with a small change.

<staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
</staticContent>

Answer 5

Another solution can be change the Font embeddability property file. Right click and see Details tab:

If this property does not appear, you can use this service to add it. It only works for .ttf font files. But I guess there are some other services to change other font file extensions.

Answer 6

sibaspage answer pointed me into the right direction. But I still see the error message in IE11. For me it worked using the following syntax:

@font-face {
   font-family: 'Font-Name';
   src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Font-Name.ttf')  format('truetype');
}