@font-face failed OpenType embedding permission check. Permission must be Installable
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>
@font-face not displaying correctly in IE
Multiple font formats
To support a wide range of browsers, use a .ttf,
.woff
and .eot
version of the font.
@font-face {
font-family: 'shardee';
src: url('fonts/Shardee.eot');
src: url('fonts/Shardee.eot?#iefix')
format('embedded-opentype'),
url('fonts/Shardee.woff') format('woff'),
url('fonts/Shardee.ttf') format('truetype');
}
You can use a Font conversion website like Font Squirrel, to convert the .ttf
font into .woff
and .eot
.
DRM false positive
As @Jukka pointed out, there's a legal issue with the TTF file that's preventing it from being usable in Windows. In the IE developer console, the following error message is displayed :
CSS3114: @font-face failed OpenType embedding permission check.
Permission must be Installable.
Shardee appears to be an abandoned font with an unknown license type. Although it may be legal to use this font, Windows seems to require that every TTF file has DRM info that explicitly says it's legal to embed it in web pages. The error in IE is most likely a false positive.
To test this, I took a TTF font that's known to be legally licensed for use on websites. The TTF version didn't work in IE because of the DRM error. This example is definitely a false positive. This is one of the reasons why it's necessary to use multiple font formats, and why a single format like TTF will not work on all browsers.
Although Windows doesn't allow IE to use the TTF file, IE can still use the WOFF or EOT version. When I tested the above @font-face
rule on a local webserver, using all three font formats, the Shardee font rendered correctly in all versions of IE (though with an error message in the IE developer console).
Steps to try:
- Convert the
.ttf
file to.woff
and.eot
- Upload the
.woff
and.eot
files to the same directory as the existing.ttf
file. - Replace the
@font-face
rule with the one above. I fixed a couple typos in the initial version of it.
If you still have a problem, there may be an issue with the web server settings. Related question: IE9 blocks download of cross-origin web font
Related Topics
How to Collapse Unused Row in a CSS Grid
How to Change Md-Input-Container Placeholder Color Using CSS in Angular Material
Change the Style of an Element If the Fragment Identifier (Hash) in the Url References It
Centering the Navbar Content in Bootstrap 4 (Alpha 5)
How to Customize Bootstrap Column Widths
Best Way to Represent 1/3Rd of 100% in CSS
Horizontally Scrollable List of Cards in Bootstrap
Are "Top" and "To Top" the Same Direction for Linear Gradients
<!--[If Ie]> Conditional Comments Are Rendered HTML-Escaped in Facelets
Change the State According to Event in Reactjs
Sizing Div Based on Window Width
How to Emulate Prefers-Color-Scheme Media Query in Chrome
How to Ignore Parent Element's Overflow:Hidden in CSS
Chrome Device Mode Emulation Media Queries Not Working
Input Type=Submit Text Vertical Alignment in Firefox
How to Have a Position: Fixed; Behaviour for a Flexbox Sized Element
Less and Bootstrap: How to Use a Span3 (Or Spanx [Any Number]) Class as a Mixin