Using @fontface fonts load italic
css, font-face, fonts
Solution
As David Stone's answer on the authoritative answer to `@fontface` questions states, this spec says that `oblique, italic` IS valid.
As he stated, FF 3.6 doesn't like the two values. Buried in the comments there are more reports of two-values not working.
On digging into the webkit bug reports, I discovered that the value for `font-style` as prescribed by the spec changed from CSS2 to CSS3. According the later css3 spec, only one value is allowed for the `font-style` property, rather than a comma-separated list.
So nowdays, if you pass in a comma-separated list, the rendering engine says "that's not a valid font-style. They must have meant `normal`." And overrides your previous normal declaration.
tl;dr: If font face is rendering all italic fonts:
font-style: italic, oblique;
should be
font-style: italic;
Problem
I have css like so: ``` @font-face { font-family: 'alegreya'; src:url('fonts/AlegreyaBold.ttf'); font-weight:normal; font-style: normal; } @font-face { font-family: 'alegreya'; src:url('fonts/AlegreyaBoldItalic.ttf'); font-weight:normal; font-style: italic, oblique; } @font-face { font-family: 'alegreya'; src:url('fonts/AlegreyaBlack.ttf'); font-weight:bold; font-style: normal; } @font-face { font-family: 'alegreya'; src:url('fonts/AlegreyaBlackItalic.ttf'); font-weight:bold; font-style: italic, oblique; } ``` And a rule for my class like this: ``` .font-alegreya { font-family:alegreya; } ``` And finally HTML: ``` <li class="font-alegreya" data-styles="bold, italic, extrabold"> Alegreya - Some sample words. </li> ``` Now, I've read here on metaltoad and other places on SO that using a single font-family is the preferred way to utilize custom fonts and that you have to put bold-italic last. The Problem is that the font is displayed italic. By using `font-weight:normal` in the css class, I get normal display weight, but `font-style:normal` doesn't clear the italics. This makes sense, since under (-webkit) "developer tools" in the "resources" tab, I only see the `black-italic` font loaded (second in my CSS file). The font is installed on my computer, but I renamed the file on the server. I've observed this in opera (webkit) and IE11, so it's my code. Edit: As mentioned in the comments, I had bold and black inverted. That accounts for the bold. But italic is still an issue.