@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
font-face not working in IE 10
I assume this is in an HTML file, due to the HTML comments and style elements...if not, look into that.
Beyond that, just use the @font-face generator
Font-face not working in IE, otf font
Internet explorer use eot format (legacy) or woff.
See MSDN
Anyway i use this code for maximum compatibility:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Font Face not working in IE8 as expected
If IE8 throws the CSS3111: @font-face encountered unknown error
, you probably have the non-matching font-family name problem.
To resolve this, you need to edit your font file, define identical names for Fontname, Family name and Name for humans and export your TTF. This can be done using the FontForge application. Afterwards, you than again convert it for web (EOT, WOFF).
More info: http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/
Update
Made it working by downloading an own version of the TTF font and converted it for web. The CSS I used:
@font-face {
font-family: 'portagoitc-tt';
src: url('fonts/portagoitc-tt.eot');
src: url('fonts/portagoitc-tt.eot?iefix') format('opentype'),
url('fonts/portagoitc-tt.woff') format('woff'),
url('fonts/portagoitc-tt.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Related Topics
How to Set the CSS Content Property with a Google Material Icon
Google Maps API V3 Tools: Visual Distortions
How to Give a Font Awesome Icon a Background Color
How to Edit CSS of New Google Forms
Css: Background Position with Repeat
Browser Specific CSS Padding for Firefox Field
Using Less, CSS3 Calc() Doesn't Work Correctly
Css: What's a Good Way to Create a Raised Box Effect
Difference Between Baseline of Empty and Non-Empty Inline Blocks
Add Syntax Highlighting to .Less-Files in Netbeans
Ember.Js Router: How to Animate State Transitions
CSS Hover on a Div, But Not If Hover on His Children
What Is the Use Case of :Host-Context Selector in Angular
How to Change the Play Icon of Embedded Youtube Videos
CSS White Space at Bottom of Page Despite Having Both Min-Height and Height Tag
Find Definition of CSS Class in External Stylesheet
Differencebetween Using 'Text-Align:Center' and 'Margin: 0 Auto' to Center an Element in CSS