Letter spacing in Internet Explorer 11 will sometimes appear completely irregular with some letters having more white space on their right hand side than other letters.
For example, I was seeing horrible letter spacing problems in an ASP.NET 4.0 Web page that I had running on Windows Server 2012. The page would render nicely when I ran it on my local machine, but as soon as I would move it to the Windows 2012 server and browse to it with IE11, I would see the most awful font problems cropping up. Some letters in a word would have no space between them with the letters looking merged, while others appeared to have 4 or 5 pixels between them; basically rendering any carefully crafted pages unreadable.
What didn’t work:
For starters, I tried altering the HTML page’s Doctype declaration between XHTML 1.0 Transitional and HTML5, but this had no effect whatsoever.
Then I tried adjusting the CSS properties: font-family, letter-spacing, and word-spacing without any luck. Basically it appeared to be an error in the font-defention file itself. Here is an example of the test page I was working with and testing my settings out on:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family:@Arial Unicode MS;
letter-spacing:1px;
word-spacing:2px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Here is example text that should give you an idea of how the font rendering in IE11 was messed up."></asp:Label>
</form>
</body>
</html>
What did Work
After trying every fix I could think of, I finally stumbled onto a fix that worked: adjusting IE11’s security settings for the Web site. It is crazy to think that security settings might result in font rendering problems, but that’s exactly what turned out to be the case.
Bottom line is that what fixed my font-spacing problems in IE11 was to add the Web site as a trusted site:
- Open up IE11
- Click on Tools on the top menu bar
- Click on Internet Options
- In the Internet Options popup, click on the Security tab
- Then click on the Trusted sites button titled Sites
- In the Trusted sites popup (if necessary) uncheck the checkbox labeled Require server verification (https:) for all sites in this zone
- Then add your site’s base URL in the textbox labeled Add this website to this zone (for example: http://example.com)
When you’ve added your site to the trusted sites list, you should see that the letter spacing problem is now fixed. If the site is on your local intranet, you could also try setting your Local Intranet Sites option to: automatically detect intranet network, which would accomplish the same thing as adding the site to your trusted sites list.
I hope this article helps save time and effort for anyone experiencing a similar issue. If simply adding the site to your trusted sites list doesn’t immediately fix the letter spacing problem, then I would suggest that you need to update a particular setting that is configured in the Security Settings for sites in your Trusted Sites Zone. I have a suspicion that might be the setting to Enable Font Downloads, but I have not been able to confirm this for sure.
Justin Cooney 
Leave a comment