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;
}
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;
}
Can't get @font-face with Internet Explorer 8
Remove the IE Conditional and put this in your CSS
@font-face {
font-family: 'cherokee';
src: url('../../custom.eot');
src: url('../../custom.eot?#iefix') format('embedded-opentype'),
url('../../font/custom.woff') format('woff'),
url('../../font/custom.ttf') format('truetype'),
url('../../font/custom.svg#cherokee') format('svg');
font-weight: normal;
font-style: normal;
}
also use '...' for custom font-face fonts like so
h1 ul li {
font: 18px/27px 'cherokee', Arial, sans-serif;
}
Also check whether your paths are set correctly.
Embedding font stops italics from working, how was it working initially?
The browser simply fakes bold or italic styles of a font. If the actual font-family does not include a bold or italic font, but the text is styled as bold or italic, then the browser sort of creates that style for us to see.
For more detail on this: https://alistapart.com/article/say-no-to-faux-bold
Webfonts used within font fallback in IE8
I'm using a stripped down version of your code (for the sake of clarity alone - there's nothing wrong with it) and testing in lots of browsers (with the webfont being STIX, like you, not that I'm aware if this plays a role), and I'm seeing some odd behaviour: font fallback in most browsers does work, but only when excluding all italic variants of fonts (be they italic or bolditalic).
I.e. this works (100% of the time), with browsers falling back to STIX for those chars not in arial:
@font-face {
font-family: 'stix';
src: url('stixgeneral-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'stix';
src: url('stixgeneralbol-webfont.eot');
font-weight: bold;
font-style: normal;
}
body {font-family: arial, stix, sans-serif;}
… but this does not work 100% of the time (although sometimes it does display the chars!):
@font-face {
font-family: 'stix';
src: url('stixgeneral-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'stix';
src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */
font-weight: normal;
font-style: italic;
}
body {font-family: arial, stix, sans-serif;}
The reason for this appears to be that the STIX fonts package has errors.
In order to get around this, open your STIX fonts package in FontForge and save - FontForge will inform you of errors. Fix these, and only then import into FontSquirrel. Font fallback should now work correctly.
Related Topics
HTML5Shiv - Why Is It Only for Ie
Adding Icons to Bootstrap Drop Down Menu Items
How to Change Active Link Color in Bootstrap CSS
Shiny Dashboadpage Lock Dashboardheader on Top
Force Nested Divs to Have Min-Height of 100%
Child Take Width % from Parents Parent
Bootstrap - Spacing Between Form-Inline Elements
Is There Any Media Query for Non-Retina Display
Bootstrap 3 Multiselect Plugin as Form Element
Is There an Inverse to The CSS "Clip" Property; Hide The Clipped Area
Text Wrapping Incorrectly for Radio Button
Anchor Not to Top of Page, But 200Px Down
Ionic - Center Text Vertically in Item-List with Item-Avatar Class
Fix Div to Bottom Without Using CSS Position
How to Give Class Name to Animation State in Angular 2/4
Thinking of The 'Zoom' in Responsive Design
Li: Before Content: "✔ "; Different Color on Some Mobile Devices