How to specify a certain font for italics option?

The thing is, I have installed two 'variable' fonts to be used in my website. One, which is normal and displays 'Regular' and 'Bold' at the same time, and the other also has Regular and Bold, but with the difference it's the italicized version from the first one. The fonts I'm using

The thing is, at the moment of adding both fonts, when I specify a sentence or a word to be on Italics, the normal font is used, but forced into italics, and it seem pretty unnatural...

This is how it should look (ignore the fontsize): Good...

But instead, looks like this: Bad...

The thing is, I have The code for my uploaded fonts like this:

@font-face {
  font-family: Rubik-VariableFont;
  src: url(https:// fakewebsite.me/1/39/Rubik-VariableFont.ttf) format("truetype");
}

@font-face {
  font-family: Rubik-Italic-VariableFont;
  src: url(https:// fakewebsite.me/3/43/Rubik-Italic-VariableFont.ttf) format("truetype");
}

And the code for use them on certain part of the page is this:

#content.mw-body {
    font-family: Rubik-VariableFont, serif;
    font-style: normal;
    font-size: 12pt;
}

The thing is, if I attempt to include the same structure for the italic version, the css prioritizes the italic font over the normal, and for some reason, everything is on italics. That's why I have only put one font and not both. Even specifying in the font-style to normal instead of italic hasn't worked.

I tried to find a solution into W3 schools, and into my default browser, but I got no answer. Asked for some guys who knows enough CSS, but have no idea about my problem. How do I fix this?

Define both font faces with specific styles and weights and use the fonts in your CSS with the appropriate styles

@font-face {
  font-family: 'Rubik';
  src: url('https://fakewebsite.me/1/39/Rubik-VariableFont.ttf') format('truetype');
  font-weight: 100 900; /* Define the range of weights */
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('https://fakewebsite.me/3/43/Rubik-Italic-VariableFont.ttf') format('truetype');
  font-weight: 100 900; /* Define the range of weights */
  font-style: italic;
}

#content.mw-body {
  font-family: 'Rubik', serif;
  font-size: 12pt;
}

#content.mw-body .italic-text {
  font-style: italic;
}