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 IE or Edge
If anyone stumbles across this post, I ended up just using a more web-friendly font.
Make sure your @font-face rules are NOT contained in media queries. @font-face rules contained in media queries do not work in IE, Edge, but work in every other modern browser I tested on.
@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 ttf file not working with IE
Some IE versions don't play nicely with ttf, see here:
What is the status of TTF support in Internet Explorer?
You will likely need a .eot fallback:
@font-face
{
font-family: 'CAROBTN';
src: url('fonts/CAROBTN_.ttf'),
url('fonts/CAROBTN_.eot');
}
You can convert font files here: https://www.fontsquirrel.com/tools/webfont-generator
The font is not displayed on IE
Try using .woff format to make it work in IE11
@font-face {
font-family: 'Museo-Sans';
src: url('../fonts/MuseoSans/MuseoSans-900.eot'); /* IE9 Compat Modes */
src: url('../fonts/MuseoSans/MuseoSans-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/MuseoSans/MuseoSans-900.woff') format('woff'), /* IE 9-11 & Modern Browsers */
url('../fonts/MuseoSans/MuseoSans-900.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/MuseoSans/MuseoSans-900.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face ie problems
You need to set Access-Control-Allow-Origin HTTP Header for this
See here:
IE9 blocks download of cross-origin web font
Does this work?
@font-face {
font-family: 'BebasNeue';
src: url('fonts/BebasNeue.eot');
src: url('fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue.otf') format("opentype");
}
On Fontsquirrel they do it this way
http://www.fontsquirrel.com/fontfacedemo/bebas-neue
Download the @font-face kit from there
@font-face {
font-family: 'BebasNeueRegular';
src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot');
src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.woff') format('woff'),
url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.ttf') format('truetype'),
url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Related Topics
Add a State Property to an Inline Style in React
Using SCSS as Default Style Sheet in Angular 6+ (Styleext)
Is Decimal Precision When Specifying a Font-Size Respected by All Browsers
How to Update and Include Twitter Bootstrap 3 on Webapp or Yo Angular
Why Is the # Selector of Lesser Specificity Than Anything
CSS Auto Numbers for Table Rows - Not First
CSS Selection Color Behaving Strangely on Chrome
Reliable Solution for Conditional Comments in Outlook.Com HTML Emails
Internet Explorer Automatically Switches to Compatibility Mode (IE9 and Ie10)
Can Grid-Row-Gap/Grip-Column-Gap Be Overridden for a Single Gutter
Is Anyone Experiencing Layout Issues After Upgrading to Chrome 72
Print Stylesheet - Converting Inputs to Text
Pure CSS Drop Down Menu - Unable to Keep Top <Li> Highlighted When Hovering Over Sub-Menu