53

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.

3
  • 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 *.ttffile 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, 2015 at 10:30
  • 1
    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: stackoverflow.com/a/34209206/904344 Jan 22, 2016 at 18:20
  • 1
    Use a chrome addon like WhatFont to verify what font is actually being used
    – Ringo
    Dec 19, 2016 at 23:05

7 Answers 7

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');
}
4
  • 4
    @jakub How is it the same? actually the one above is wrong, you can't set the "src" multiple times
    – mhyassin
    Nov 23, 2017 at 17:57
  • Worked for me. Thanks! Jan 25, 2018 at 10:46
  • For me, the embedded-opentype format was missing, adding this resolved the problem. Oct 24, 2018 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 3, 2019 at 10:15
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>
6
  • Could you add information if the rendering of the displayed page / element was rendered different before you applied the fix?
    – surfmuggle
    May 28, 2015 at 10:33
  • 1
    @threeFourOneSixOneThree if I can remember correctly I didn't spot any change. Jun 2, 2015 at 11:02
  • 4
    What could be equivalent NodeJS solution?
    – vinesh
    May 30, 2016 at 14:20
  • 9
    sorry i put the code in web.config but it's not work :( Jun 13, 2016 at 14:20
  • In IIS, try setting the mime type as following: fileExtension=.woff" mimeType=application/x-font-woff and similarly for .ttf May 28, 2017 at 23:23
23

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

enter image description here

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.

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

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

-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.

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.