@font-face failed OpenType embedding permission check. Permission must be Installable
CssFontsFont FaceCss Problem Overview
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?
> 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.
Css Solutions
Solution 1 - Css
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');
}
Solution 2 - Css
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>
Solution 3 - Css
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.
Solution 4 - Css
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>
Solution 5 - Css
@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('☺'),
Solution 6 - Css
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.
Solution 7 - Css
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');
}