@font-face not working as oblique

Question

So I have 2 fonts.

@font-face {
  font-family: 'helvetica neue black condensed';
  src: url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed.eot');
  src: url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed?#iefix') format('embedded-opentype'),
       url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed.woff') format("woff"),
       url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed.ttf') format("truetype");
       font-style: normal;
       font-weight: normal;
     }
@font-face {
  font-family: 'helvetica neue black condensed oblique';
  src: url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed.eot');
  src: url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed?#iefix') format('embedded-opentype'),
       url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed.woff') format("woff"),
       url('/wcsstore/Html/Static/fonts/HelveticaNeueBlackCondensed/HelveticaNeueBlackCondensed.ttf') format("truetype");
       font-style: oblique;
       font-weight: normal;
     }

As you can see they are both referencing the same file. The first is normal, and second oblique. 'helvetica neue black condensed' works just fine, but for some reason, 'helvetica neue black condensed oblique' is not recognized by the browser. I have about 50 fonts, and the oblique ones are not working. Is this a coincidence?

Please do not lecture me about the use of certain fonts. I have the licenses. Do not tell me to make the font-style: oblique; in the main.css I want a font family that is oblique that is oblique by default.

Answer 1

So turns out that for some reason, ie will not allow font family names over 4 words. I just changed the name to 'helveneueblack condensed oblique' and problem solved. whoop

Answer 2

What you are doing is like trying to display a gif image in 'oblique', it won't work.

The font, glyph is an 'image' of some sort.

You have to target the OBLIQUE variant of your font set.

User Jukka K Korpela wrote it more straight forward.

---

[ copy-paste of an epic answer about the same situation ] Here I go answering my own question. The solution seems to be to add multiple @font-face rules, for example:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

By the way, it would seem the Google Chrome doesn't know about the format("ttf") argument, so you might want to skip that.

Answer 3

The code in the question uses identical URLs in the two rules, as you say. You cannot make a typeface oblique just by using the word “oblique” in its name or declaring font-style: oblique for it. You need to refer to files containing an oblique typeface in the second rule.

Some browser may actually apply algorithmic slanting to a font if no oblique typeface is available and font-style: oblique is declared for an element. (The question does not reveal whether the latter is the case.) This is typographically bad, of course. On the practical side, it won’t happen in this case, since the @font-face rule declares the a font to be oblique (even though it is apparently normal).