Can't set font-weight on Google Fonts

Question

This question has been asked quite a number of times, but none of them works for me. For example:

• Google fonts font-weight of 100 is not working. (I don't have the font I want to use already in my system.)
• Why is google font weight not working?. (I'm not using it in a heading, just a regular paragraph.)

I used Google Fonts with the @import like so:

@import url('https://fonts.googleapis.com/css?family=Rubik');

body {
    font-family: 'Rubik', sans-serif;
}

The typeface shows up, but I can't do anything with the weight. The <strong> tags aren't displayed bold. The font-weight property in the CSS isn't working. Not even overriding it in browser's inspector changes anything.

Update

The thing seems to only work on Gecko-based browsers, like Firefox.

Byington

So, what weights does Rubik come with? – Vaisya

Answer 1

The answer is that the Google font isn't calibrated to carry all of the weights you want with it.

Some of the browsers may display 'thicker' or 'thinner' type, but they are tricking you. They are doubling up the normal font to simulate what you are asking for when there is no actual weight of that type available. The ones that do that are trying to be nice, but these days it is more confusing than helpful. According to your code snippet, you have:

@import url('https://fonts.googleapis.com/css?family=Rubik');

vs

@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500i,900,900i');

(Google Fonts UI 2017 - may look different in the future but the concept is the same for any font service)

Many fonts only have 1 weight.

Vaisya

Answer 2

Here's a list of all of the possible names for font-weights;

    Thin            100     
    Extra Light     200
    Light           300
    Regular         400
    Medium          500
    Semi-Bold       600
    Bold            700
    Black           900

Mayo

Answer 3

I have had also issues to get the weights working, even though I had properly copied the HTML code from google and put into my head.

Solution:

I used the @import function by adding it my CSS and now everything works without issues. Seems that @import is more robust or less conflicting with wp themes.

Boys

Answer 4

I had the same issue. For me the problem was that my link to bootstrap was placed after my link to styles.css in my html, and thus bootstrap overrode the style for h1.

The solution was simply to put the link to styles.css after the link to bootstrap in my html. :)

Freebooter

Answer 5

I had the same problem until I found out that you can not change the font weight of the body.

you have to target the exact tag you want to change the weight eg. Check this code out

Bosch

Answer 6

I had the same problem: i noticed that it occurred when you import the font on the css file like:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

So in order to solve i just imported all the font weight from the html file and then use the font weight and the font family as usual in the css file:

<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

Doing like this i was able to solve my problem. Noticed that you can't specify the font weight in the body tag but you have to do in the single html tag like h1 h2 h3 p ecc

Sophisticated

Answer 7

The no. of fonts weights you require select them all.This will look like this:

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,300&display=swap');

Now you can use all this font-weights.

Nettles