Using @fontface fonts load italic

Question

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.

Just for cross-reference, [this similar question](http://stackoverflow.com/questions/10609002/defining-css-font-face-bold-italic) also seems to be needing an answer. — Josiah, Feb 17 '15 at 19:49
In the post @Josiah referenced is a comment that may help you: http://stackoverflow.com/questions/10609002/defining-css-font-face-bold-italic#comment13766538_10615516 — ala_747, Feb 17 '15 at 20:26
thanks @ala_747 - but isn't that what I have? Normal -> Italic -> Bold -> Bold-Italic? That's why I did them in that order. — Josiah, Feb 17 '15 at 20:30
I don't think "Black" is meant to be "Normal"... perhaps you can give a try changing the filenames. — ala_747, Feb 17 '15 at 20:34
Yes, true, I have made that change but the point still stands - it's loading the italic font for no reason. But I will edit the code. — Josiah, Feb 17 '15 at 20:38

score 6 · Accepted Answer · edited May 23 '17 at 12:07

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;

Using @fontface fonts load italic

1 Answers1

Linked