Why Is Google Font Weight Not Working

Can't set font-weight on Google Fonts

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.

Why is google font weight not working?

The font-weight property is set to 500 in the bootstrap css file onto the following elements:

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6

If you want to set the font-weight of an element, you need a selector which is more specific than the default selector (of bootstrap). If you e.g. write a more specific selector like .container-fluid h1 { font-weight: 100; }, you will see, that it affects the element. You could even use the highly non-recommended !important after the CSS rule to override more specific CSS rules.

It is however not reasonable to overwrite all styles of a page with the same font-weight. Usually, e.g. titles have a different font-weight than regular text.

EDIT: In your example, however, you could simply use the h1 selector to select all <h1> elements instead of selecting the .h1 class. You probably made a mistake there. If you have the same specificity of the selector, the order of the CSS stylesheets is relevant. The styles of bootstrap are included before your custom styles, so your custom styles override the bootstrap styles.

Google font CDN: font weights not displaying as expected

Thanks to Andrew Li, I realized I was including font-weights for Open Sans, not Lato. Here's a fixed Plunkr:

https://plnkr.co/edit/9mKXYie2BdMvkf3uuvgn

The fix was:

<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">

Google Font Weight 300 not working

I think you should start it from scratch, goto google fonts, search for opensans fonts then select what all type you want, then download the zip.
Once you download the zip file go to fontsquirrel, upload this zip file in font generater section then you will get fonts unzip them and add them to fonts folder in your project then you can include code given in styleshit.css, in zip file from https://www.fontsquirrel.com/tools/webfont-generator, it will look something like this.

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('../fonts/opensans-regular-webfont.woff') format('woff'),
         url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/opensans-semibold-webfont.eot');
    src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-semibold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-semibold-webfont.woff') format('woff'),
         url('../fonts/opensans-semibold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

...and so on all fonts type which you selected from google fonts. while adding font family just add font-family:'open_sansregular'; I found this is the best solution to avoid all overheads and browser compatibilities, thank you.

Tip : I found many times if you give direct links to fonts using cdn then it may fail to load also some browsers will not get font family you type. So including fonts in your project always helps.

---

Related Topics