IE - Potential issues with fonts

ie

https://makandracards.com/makandra/42281-when-internet-explorer-does-not-render-webfonts-on-customer-machines
https://medium.com/@MateMarschalko/improving-font-rendering-with-css-3383fc358cbc
https://pixelambacht.nl/2013/font-face-render-check/
https://css-tricks.com/font-display-masses/
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization

How can we disable Always Use Clear Type for HTML?

  1. Open Internet Explorer.
  2. Click on Tools.
  3. Click “Internet Options“
  4. Click “Advanced” Tabs.
  5. Under Multimedia, Uncheck the“Always Use ClearType for HTML”.
  6. Click OK
  7. Now restart Internet Explorer 9 and check if you’re able to get the right fonts displayed.

The problem with font-size in quirks mode is that when using medium, large, x-large etc, the browser is always showing the font as one step larger than in standards mode. This means large in quirks mode is the same as x-large in standards mode. The medium value of the font-size property matches the default normal font size. The keyword values of this property include xx-small, x-small, small, medium, large, x-large, and xx-large. With earlier versions of Internet Explorer, these values are not defined intuitively. The medium value is not the default normal font size; small is the default.

  1. https://stackoverflow.com/questions/16940388/font-size-large-looks-different-in-ie-8-quirks-vs-standards-mode
  2. http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Internet Options » Security » Custom Level » Downloads » Font Download » Enable

In my case it was a display: table set on the element. Removing it resolved an issue.

I faced the same Issue and I just added the following Link in the Tag and it worked:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Internet Options/Security/Local intranet/Sites/Advanced

https://helpx.adobe.com/fonts/kb/troubleshoot-adding-fonts-website.html#ie
https://docs.layerswp.com/doc/internet-explorer-does-not-display-website-correctly/

X-UA-Compatible: IE=edge
HttpContext.Current.Response.AppendHeader("X-UA-Compatible", "IE=edge")

An alternate option would be to turn off "Automatically Detect Intranet Sites" under the Tools -> Options menu, Connections tab in IE itself.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License