Geek Answers Handbook

@ font-face does not display correctly in IE

I looked for a watch, asked my friends, and it didn’t work. So I hope you guys can help me. My site uses a custom font, but IE (10) does not support this in its own way. I have no idea that it supports other methods. Here is my:

@font-face { font-family: shardee; src:url('fonts/Shardee.ttf'); }

There is no need to have your own font in Internet Explorer, but it would be nice.

When Internet Explorer does not know the font, it used its default font. But the problem is that the font size of the custom font is perfect, but the default Internet Explorer font is too large. I tried to fix this with css IE code, but it just doesn't work. I am using the following css code for Interner Explorer:

  <!--[if IE]> <style> #menu ul li{ font-size:15px; } </style> <![endif]-->

I also tried it with an external stylesheet, which looked like this:

  <!--[if IE]> <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ?>/style/ie.css" /> <![endif]-->

The function that I use in php is a wordpress function that will lead you to the path of your site. If you are not using wordpress, you can forget this code and leave it empty.

The problem is not in the way, the way is right. I looked at the source code in a browser and showed me the code that I have in ie.css. The code in ie.css is exactly the same as above, but without the ect tags.

Hope you guys can help me with this problem. As far as I know, 2 solutions are possible. Let a specific css work or show me a way to create custom fonts in IE. I am using Internet Explorer version 10.

You can see the site here , but as soon as it is fixed, it will disappear, because I do not need to put it on the subdomain once it is fixed.

Regards, Bart Roelofs

+6
source share
6 answers

Multiple Font Formats

To support a wide range of browsers, use the font .ttf, .woff and .eot .

 @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 a .ttf font to .woff and .eot .

DRM false positive

As @Jukka pointed out, there is a legal problem with a TTF file that prevents it from being used on Windows. The following error message is displayed in the IE Developer Console:

 CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.

Shardee seems like an abandoned font with an unknown type of license . Although it may be legal to use this font, Windows seems to require every TTF file to have DRM information, which explicitly states that it is legal to embed it in web pages. The error in IE is most likely false.

To test this, I took the TTF font, which is known to have a legal license for use on websites. The TTF version did not work in IE due to a DRM error. This example is definitely false. This is one of the reasons why it is necessary to use several font formats and why a single format, such as TTF, will not work in all browsers.

Although Windows does not allow IE to use the TTF file, IE can still use the version of WOFF or EOT. When I tested the @font-face rule above on a local web server using all three font formats, the Shardee font displayed correctly in all versions of IE (although with an error message in the IE Developer Console).

Actions:

  • Convert .ttf file to .woff and .eot
  • Download 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 of typos in the original version.

If you still have problems, there may be a problem with your web server settings. Related question: IE9 blocks cross-original web font loading

+13
source

Thus, the problem is apparently in IE 10, the menu inside the element with id=menu not displayed in the declared "shardee" font, but in the default browser font. This makes the menu easy to read. But technically, the explanation can be seen in the Developer Tools (press F12 to enter them) in the console panel. An error message with CSS3114 code indicates that @font-face did not pass validation of use rights for embedding.

Review the font usage rights and contact the copyright owner (which should be considered bright ideas) for rights, if possible.

+2
source

FontPrep is a great web font generator for Mac OS X. It will even create a fonts.css file.

+2
source

I ran into the same problem and ran F12. It seems that compatibility was included in IE10 for the site I was on. As soon as I turn off compatibility viewing, a custom font will be displayed. Hope this helps someone ...

0
source

IE11: If you get the CSS3114 error CSS3114 in dev tools, you need to change the first bits of the font file. This will allow IE to install the font.

Npm module: You can use the ttembed-js npm module, which will make the changes for you. https://www.npmjs.com/package/ttembed-js

Usage: ttembed-js path/to/Shardee.ttf

0
source

When searching the Internet, I found this online tool that does TTF font repair, making it visible to Explorer: https://www.andrebacklund.com/fontfixer.html

0
source

More articles:


All Articles