IE vertical cut last letter
I am using Google Oswald font in the top nav of this website and it works fine in all browsers. But in two different IE11, installed on two different computers, the page loads half the time, the last letters of some lines are cut off:
This is a capture of IE running OK (green dots) and IE showing the problem (red dots):
As you can see, it looks like the text itself is rendering with the same width in both browsers, but in the browser with the problem, the containers that wrap the text don't expand enough.
The worst part is that this only happens on my client computers and I cannot reproduce the problem.
I've done extensive research and I've tried many things:
- Changing the font size
- Verifying that the local Oswald font is not installed on the computer
- Using Oswald font downloaded from Squierrel font instead of Google font
- Change font size, word spacing, letter spacing, deactivate text transform and text shadow
- Activate / Deactivate Windows ClearType
If my client clicks refresh in IE with a problem, half the page load time is OK. In addition, if it checks the code and activates and activates one of the styles, such as font size, the problem is fixed.
The problem does not occur with regular fonts or with
UPDATE:
I made a minimal jsfiddle model that reproduces the issue. I added two other text blocks using different google fonts and the problem is only with Oswald's font. My client says that the problem occurs very often when he uses CTRL-F5 instead of F5.
In case you cannot access the jsfiddle, here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://fonts.googleapis.com/css?family=Bowlby+One&v2);
body {
background: #ccc;
}
.container {
width: 158px;
}
.container h2 a {
text-transform: uppercase;
color: #fff;
font-size: 14px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
line-height: 1.5em;
}
.container h2 a:hover {
color: #ecd6bc;
}
.container.one h2 a {
font-family: 'Oswald';
}
.container.two h2 a {
font-family: 'Droid Sans';
}
.container.three h2 a {
font-family: 'Bowlby One';
}
</style>
</head>
<body>
<div class="container one">
<h2><a href="http://www.example.com">Suspendisse nec metus quis nunc cursus fringilla.</a></h2>
</div>
<div class="container two">
<h2><a href="http://www.example.com">Suspendisse nec metus quis nunc cursus fringilla.</a></h2>
</div>
<div class="container three">
<h2><a href="http://www.example.com">Suspendisse nec metus quis nunc cursus fringilla.</a></h2>
</div>
</body>
</html>
Thank you for your help.
source to share