IE8 Renders font weights randomly
I've had the same issue when using multiple weights and styles of a single font in IE8. Typekit has an article that explains this bug in IE8 and below: Using multiple weights and styles
According to them:
"Internet Explorer 6, 7, & 8 load a maximum of four weights per family. Additionally, using two closely-related weights (e.g., 400 and 500) may result in only one weight loading correctly."
Using variation specific seems to be the way to solve this. Like so (snippet from a Myfonts.com web font kit):
@font-face {
font-family: 'AvenirNextLTPro-DemiIt'; /* Demibold Italic */
font-style: italic;
font-weight: 600;
src: url('webfonts/25A826_1_0.eot');
src: url('webfonts/25A826_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/25A826_1_0.woff') format('woff'),url('webfonts/25A826_1_0.ttf') format('truetype');
}
@font-face {
font-family: 'AvenirNextLTPro-BoldIt'; /* Bold Italic */
font-style: italic;
font-weight: 700;
src: url('webfonts/25A826_6_0.eot');
src: url('webfonts/25A826_6_0.eot?#iefix') format('embedded-opentype'),url('webfonts/25A826_6_0.woff') format('woff'),url('webfonts/25A826_6_0.ttf') format('truetype');
}
.someclass {
font-family: 'AvenirNextLTPro-DemiIt'; /* Demibold Italic */
font-style: italic;
font-weight: 600;
}
.otherclass {
font-family: 'AvenirNextLTPro-BoldIt'; /* Bold Italic */
font-style: italic;
font-weight: 700;
}
Custom font sometimes renders in italics in IE8 / IE7
For each of your @font-face
font-family
names, create a custom name instead.
Example:
@font-face {
font-family: 'DINnormal';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DINbold';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'DINitalic';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'DINboldItalic';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
After those CSS rules are defined, then you can include specific CSS rule:
li {
font: 18px/27px 'DINnormal', Arial, sans-serif;
}
@font-face flicker on every page load in ie8
Ive managed to fix this by adding caching rules for this file in the htaccess.
IE8 web font iframe bug workarounds
So, there is no performance hit with the following (as long as your CSS is reasonably sized), you get to leave the <link>
tag in <head>
, and it works without issue, but you are still basically 'reloading' your <link>
elements (though you are not doing so by resetting their url).
On the removal of the <iframe>
element, simply do the following:
var sheets = document.styleSheets;
for(var s = 0, slen = sheets.length; s < slen; s++) {
sheets[s].disabled = true;
sheets[s].disabled = false;
}
Reloading is all I can really think of as working since it seems to be removing it in garbage collection from the <iframe>
. Set up a test page that obviously only works for IE 8.
Of Note: I was originally unable to reprodcue this issue using Google web fonts, and had to specifically download a .eot
font for use for this. So your work around maybe to use WOFF fonts first, and only load EOT if necessary.
Not exactly sure if this is what you were looking for, but if it's not, please clarify and I'll edit as necessary.
Update 1: The cause
So, I've narrowed down the cause of the issue. I am only able to reproduce if the following occurs (and this is a nasty one folks).
- And
<iframe>
is contained within a parent element - The parent element's class is changed
- The class does not change the
display
of the element it is being applied to (or really, if it does not change the overall display on the<iframe>
element)
And, from what I can tell, yes, it has to be the class name. I was unable to reproduce given the same steps on the id
of an element. Seriously. This one is a nasty one. I'll keep digging a bit.
Update 2: A Secondary Cause
If the <iframe>
is not fully in the browser window on draw, it will not load the font within the <iframe>
window, and will unload the font for the main window whenever it has to redraw the page (most notably when it is resized). This is a gnarly bug.
Update 3: What should be a solution
Instead of using display: none;
, set the height and the width of the element to be 0px
and the overflow: hidden;
, and you'll get the same effect as display none, but it will not remove it from the DOM, thereby not redrawing the page and taking your font. My test page from before has been updated, so you can see the effect on what used to be the bug.
Styling Text Elements in Internet Explorer 8
The text tag is no defined standard. To add a paragraph use the p tag please. I did inspect the tag in IE 8 and as it seems is the tag directly closed without text within. So you just need to use an allowed tag like p
<p class='boldText title'>
sometitle
</p>
Here's the fiddle: http://jsfiddle.net/bd5Lrkjn/embedded/result/
L characters showing up randomly in text in IE 8
Maybe you can refer to this https://webmasters.stackexchange.com/questions/15709/strange-characters-appearing-on-websites-ascii-unicode
There may be some encoding issue with the content.
Related Topics
Global CSS Variables VS Local Variables in Terms of Efficiency
Remove/Reset CSS Behavior Property
Using CSS to Create Custom Borders with Just the Corners Showing
I Need to Remove the Horizontal Scrollbar on an Overflown <Div>
Is There an Ideal Size for Background Images
CSS 3 Animation "Transform: Scale" on Column Element Doesn't Work on Chrome
CSS - Position Absolute & Document Flow
Using a Div to Blur an Image Behind It
How to Position an Image at The Bottom of Div
Cannot Make Max-Width Work with Bootstrap Dropdown-Menu
Shape-Outside of an Image Centered Between Two Text Blocks
How to Make Padding:Auto Work in CSS
Remove Padding from Unordered List
Change Colour Navbar Header Ionic 2
Confusion as to How Clearfix Actually Works
Easy Equal Height Divs Without JavaScript Possible
Trouble (Vertically) Centering Text in Another Div with Relative % Sizing