cssfontsgoogle-webfonts

Can't set font-weight on Google Fonts

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.

Solution

  • 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.