After meticulously following the seemingly foolproof guidelines for @font-face outlined in this post here, I am still encountering faux-italicization issues with IE8 when using webfonts. This occurs as I try to accommodate the styling of my fallback fonts if, for some reason, the desired font fails to load.
The Pacifico script font (served locally) is what I'm working with, and my aim is to ensure that it gracefully degrades to a serif italic style when needed. Sneakily, I have specified its style as italic within my @font-face declaration.
@font-face {
font-family: 'Pacifico';
src: url('Pacifico-webfont.eot');
src: url('Pacifico-webfont.eot?#iefix') format('embedded-opentype'),
url('Pacifico-webfont.woff') format('woff'),
url('Pacifico-webfont.ttf') format('truetype'),
url('Pacifico-webfont.svg#Pacifico') format('svg');
font-weight: 500;
font-style: italic;
}
While this h1 style successfully loads the font as intended, IE8 introduces faux-italics to the script.
h1{
font-family: 'Pacifico', serif;
font-weight: 500;
font-style: italic;
font-size: 32px;
color: #f9a51a;
Despite being confident in my adherence to the instructions provided, I find myself at a loss :(. Chrome and Firefox behave as expected - the @font-face declaration effectively prevents faux-styling. Unfortunately, it seems there may not be a flawless solution for dealing with IE8.
(For clarification, IE9 appears to handle both the webfont and fallback font/style correctly.)