Google Fonts Font-Weight of 100 Is 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 fonts font-weight of 100 is not working

I figured it out!

I had the font Roboto installed on my computer so it was using that font instead. I removed/deleted this font and this fixed the google boldness as google uses that font all over the place.

I then removed/deleted Raleway which was also installed on my computer and that fixed the initial issue with my website.

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.

Variable font from Google Fonts doesn't change weight

I found the problem. I was specifying a range of weights which exceeded the range available for this font. Instead of doing this:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@200..900" />

I should have used 300..700

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700" />

Also, I wasn't always doing a proper refresh when changing the import because I've got too used to React's hot reloading but obviously if you change the font links in the head then you have to F5.

Google Fonts - variable fonts not working in Windows browsers

Update: google font API might return static font files

Due to user-agent detection, you might get static rules in some browsers – even though they support variable fonts flawlessly (e.g. chromium/blink based Opera browser). Firefox or Chrome should work perfectly.

Use the '..' range delimiter and open the css URL in firefox

https://fonts.googleapis.com/css2?family=Inter:wght@100..900

The desired variable @font-face rules should look like this:

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
}

Note the font-weight: 100 900 property using two values to specify a weight range – Bingo! we got the correct variable font css.

Example1: retrieve @font-face via API css URL

let fontWeight = document.querySelector('#fontWeight');
let fontVariation = document.querySelector('#fontVariation');
let fontSamples = document.querySelectorAll('.fontSample');

fontWeight.addEventListener('change', function(e){
  let value = e.target.value;
  fontSamples.forEach(function(item, i){
      fontSamples[i].setAttribute('style', 'font-weight:'+value);
  } )
} );

fontVariation.addEventListener('change', function(e){
  let value = e.target.value;
  fontSamples.forEach(function(item, i){
      fontSamples[i].setAttribute('style', 'font-variation-settings: \'wght\' '+value);
  } )
  
} )

body{
font-family: georgia
}

@font-face {
    src: url('https://mdn.github.io/css-examples/variable-fonts/fonts/AmstelvarAlpha-VF.woff2') format('woff2-variations');
    font-family:'Amstelvar';
    font-style: normal;
}

.amstelvar{
     font-family: 'Amstelvar', serif;

}

.inter{
     font-family: 'Inter', 'Open Sans', sans-serif;
}
  

h1{
  font-weight: 500;
  transition: 0.3s;
}

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

<h1 class="fontSample inter">Hamburglefonstiv (Inter)</h1>
<h1 class="fontSample amstelvar">Hamburglefonstiv (Amstelvar)</h1>

<p>
<label>Font weight</label>
  <input id="fontWeight" type="range" min="100" max="900" step="1">
</p>

<p>
<label>font-variation-settings</label>
  <input id="fontVariation" type="range" min="100" max="900" step="1">
</p>

font-weight is not working properly?

Its because the font size (9px) is too small to display bold. Try 11px or more and it works fine.

---

Related Topics