Rubik Light Font is rendered instead of just Rubik

Issue

I'm trying to include Rubik Font in my project:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">

body {
  font-family: 'Rubik', sans-serif;
  font-weight: 500; // or 400, or any, whatever
}

Here's also a Stackblitz of this solution.

However, the computed font I see in Chrome Devtools is Rubik Light, no matter what font weight I set. I also tried to download it to use locally with no success.

How can I set Rubik font? Rubik Light looks kinda weird when bold.

I also cannot understand whether it's the problem with the font itself.

Solution

Had to select font styles via Google Fonts UI to get the following url:

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap');

It's still Rubik Light, but now styles apply correctly.

Answered By - Feeco