@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?

enter image description here

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. File: 53d9eae5-63b4-48d7-a5b8-3419455028bb.ttf

The web site is running on Azure Websites platform and is using ASP.NET MVC 5.

I have the same error in IE11; but if i compare the look in IE11 and in Firefox 31 the fonts look identical. If i look at the dev tools the css attribute `font-family` is set to the right font. Does anyone know if the font that is rendered is the `@font-face` from the `*.ttf`file that could not be installed? In other words could it be that despite the error `CSS3114` the desired font is loaded and displayed? — surfmuggle, May 28 '15 at 10:30
Based on @NathanOliver's suggestion, I'm posting a comment instead of an answer. If you have a need to convert the font in the future, see my answer here: http://stackoverflow.com/a/34209206/904344 — NobleUplift, Jan 22 '16 at 18:20
Use a chrome addon like WhatFont to verify what font is actually being used — Ringo, Dec 19 '16 at 23:05

score 31 · Answer 1 · answered Nov 08 '17 at 07:38

31

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

answered Nov 08 '17 at 07:38

Martin

391
4
6

4

@jakub How is it the same? actually the one above is wrong, you can't set the "src" multiple times – mhyassin Nov 23 '17 at 17:57
Worked for me. Thanks! – Sandeep Nayak Jan 25 '18 at 10:46
For me, the embedded-opentype format was missing, adding this resolved the problem. – Mike Strother Oct 24 '18 at 22:20
For me it was, that the .otf -File was loaded before the .eot?#iefix -File. Reversing the loading order in the CSS worked for me. – Sascha M Dec 03 '19 at 10:15

Jakub Holovsky · Accepted Answer · 2015-03-31T00:45:57.663

29

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>

edited Mar 31 '15 at 00:45

answered Mar 30 '15 at 23:10

Jakub Holovsky

6,543
10
54
98

Could you add information if the rendering of the displayed page / element was rendered different before you applied the fix? – surfmuggle May 28 '15 at 10:33
1

@threeFourOneSixOneThree if I can remember correctly I didn't spot any change. – Jakub Holovsky Jun 02 '15 at 11:02
4

What could be equivalent NodeJS solution? – vinesh May 30 '16 at 14:20
9

sorry i put the code in web.config but it's not work :( – Osama khodroj Jun 13 '16 at 14:20
In IIS, try setting the mime type as following: fileExtension=.woff" mimeType=application/x-font-woff and similarly for .ttf – user2260040 May 28 '17 at 23:23
Working Fine :) – Thulasiram Nov 05 '19 at 13:01

entoniperez · Answer 3 · 2018-11-06T17:20:25.327

23

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.

edited Nov 06 '18 at 17:20

answered Sep 14 '18 at 10:33

entoniperez

544
5
14

2

This solution for for me, additional i use this converter because my font was in .otf https://everythingfonts.com/otf-to-ttf – Hugo Fortis Feb 18 '19 at 19:59
What is the purpose of this embeddability if you can so easily change it? – BelgoCanadian May 17 '19 at 16:28

score 3 · Answer 4 · answered May 16 '19 at 22:07

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>

score -1 · Answer 5 · answered Apr 25 '18 at 11:54

@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('☺'),

Aishwarya Ramesh · Answer 6 · 2019-07-02T04:58:46.740

-2

I had the same problem and found this article: https://creativemarket.com/blog/the-missing-guide-to-font-formats. You can just add the relevant fonts to your font-face.

edited Jul 02 '19 at 04:58

answered Jun 24 '19 at 07:18

Aishwarya Ramesh

7
4

score -4 · Answer 7 · edited Feb 04 '20 at 10:07

-4

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

edited Feb 04 '20 at 10:07

demo

6,038
19
75
149

answered Sep 25 '17 at 10:21

Sibaram Sahu

990
2
13
21

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

7 Answers7

Linked

Related