Internet Explorer 11 and Supported Web Fonts

Internet Explorer 11 and supported web fonts

This is the standard way of loading with @font-face, hacky fixes and all -

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

hey please check the Compatibility tables for support of EOT, check these links -

Link 1

Link 2

Google Fonts not working in Internet Explorer (IE) 11

Using the Web Font Loader javascript instead of the default method of adding fonts works in IE11 for me. https://developers.google.com/fonts/docs/webfont_loader.

It also had the advantage of having default font text showing on slow connections until font downloads, at which point it will switch to google font. Otherwise you get no text at all for tens of seconds.

Important note: You should choose your fall-back fonts to those with similar size / kerning / leading etc to minimise screen re-draw and content jumping issues that affect UX.

@font-face not working with specific version of Internet Explorer 11

This could be related to an issue with the Security Settings as described in this bug report.

In Internet Options go to:

• The Security Tab
• Security level for this zone
• Custom level
• Downloads
• Font Download

If it's Disabled then you need to Enable it.

How to fix issue with Internet Explorer 11 rendering text before applying @font-face which lead to text overflow

I fixed it by re-downloading the font kit from fonts.com. It seems they fixed the files on their side as they are different and load correctly on IE11 now.

Cheers

---

Related Topics