How to show different Italic and Oblique styles when the font provides them?

Question

For example the Victor Mono font has vastly different (ie. properly designed) Italic and Oblique styles, and I'm using it as my prefered programming font, however I can't seem to make it properly show both styles at the same time in code editors/text processors or on a webpage.

When I installed the font on my local system, both Italic and Oblique shows the Italic variant, I figured it might be an issue with the OS font system, so I tried to embed the fonts with CSS like this

@font-face {
    font-family: 'Victor Mono';
    src: url('VictorMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Victor Mono';
    src: url('VictorMono-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Victor Mono';
    src: url('VictorMono-Oblique.ttf') format('truetype');
    font-weight: normal;
    font-style: oblique;
}

but now both

html {font-family:Victor Mono; font-weight:normal; font-style: italic;}

and

html {font-family:Victor Mono; font-weight:normal; font-style: oblique;}

shows the Oblique style. While if I re-order the @font-face rules to put the Italic one below the Oblique one like this

@font-face {
    font-family: 'Victor Mono';
    src: url('VictorMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Victor Mono';
    src: url('VictorMono-Oblique.ttf') format('truetype');
    font-weight: normal;
    font-style: oblique;
}

@font-face {
    font-family: 'Victor Mono';
    src: url('VictorMono-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

both Italic and Oblique styles will show the Italic variant. So it seems font-style: italic and font-style: oblique are actually interpreted as the same rule by the render engine and the rule appears later will override the former one?

So how should I show different italic and oblique font styles? For example I'd like VSCode to show comments in Italic style while reserved keywords in Oblique style. Currently it shows Italic all the time for both comments and reserved keywords which hurts my eyes when I look through the code.

Fahim Khan Fahim Khan · Accepted Answer · 2019-09-24T06:18:38

I think its beacause of same font-family name, try this out:

@font-face {
font-family: 'Victor Mono Normal';
src: url('VictorMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
@font-face {
font-family: 'Victor Mono Oblique';
src: url('VictorMono-Oblique.ttf') format('truetype');
font-weight: normal;
font-style: oblique;}
@font-face {
font-family: 'Victor Mono Italic';
src: url('VictorMono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;}

How to show different Italic and Oblique styles when the font provides them?

2 Answers