16

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

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.

Improve this question
2
  • 1
    So, what weights does Rubik come with? Commented Mar 21, 2017 at 2:44
  • https://fonts.googleapis.com/css?family=Rubik loads only the regular (400) weight – tha's just how the API works. You can open the URL in your browser to inspect the result. This applies to all font-families – albeit there might also be fonts providing only a bold or italic style Commented Nov 9, 2024 at 0:43

8 Answers 8

Reset to default
17

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');

enter image description here (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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Sorry for being nitpicky: [...] Google font isn't calibrated to carry all of the weights you want with it. . It's basically just how the google fonts API works (even in the newer v2 version) – if only the family name is passed as a query parameter the returned CSS will only return the regular (400) with (also omitting italic styles). Also, Some of the browsers may display 'thicker' or 'thinner' type, but they are tricking you – you're right when it comes to "Faux Bold" – synthetically boldening a font. But there is no such thing as "Faux Light" – you'll never see thinner rendering.
Good points! Do you know if browsers still do the doubling up thing - is that no longer an issue now?
Basically, still the same issues – albeit the cross-browser-inconsistencies in faux bold algorithms may have slightly changed in the past years. Worth mentioning: we have better ways to disable faux styles due to ie's final death and wide support for the font-synthesis property. However google fonts's API V1 used the same logic as V2: font-family name returns only the regular/upright variant.
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
Improve this answer

1 Comment

Sorry, but this doesn't answer the OP's question – who haven't used any keyword-based weights. https://fonts.googleapis.com/css?family=Rubik just doesn't return additional weights (other than 400).
1

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.

Improve this answer

1 Comment

Sorry, but both concepts (links or @import) work fine – provided they are not overridden by other CSS rules. E.g due to subsequent theme or plugin/library related CSS additions.
1

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.

Improve this answer

Comments

0

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. :)

Improve this answer

1 Comment

Your answer could be improved by adding a code example (ideally a snippet) illustrating potential conflicts between the google font CSS and Bootstrap.
0

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 enter image description here

Improve this answer

1 Comment

Sorry, but you can define a font-weight for any HTML element including <body>. The main problem is caused by incorrect font loading (The OP's query would only return the regular font-weight). If your CSS doesn't include a font-weight of 200 –you'll most likely get the regular weight (400). Besides, please favor code examples over screenshots.
-1

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

Improve this answer

Comments

-1

Simple solution.

Click on the change styles button before you get your embedded URL on the google fonts website and change the options to include all font weights.

enter image description here

Improve this answer

1 Comment

Hi, welcome to SO :) Before answering a question that already has highly-rated answers, please consider if your answer is providing any new information. It may make more sense to edit the top answer to factor in your information.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.