Set Thickness of Google Fonts in CSS

Altcademy Team wrote on 7 February 2018

If you are using the google fonts, they have different thickness fonts. How do you apply different thickness with the style attribute?

You can use the font-weight attribute to set font thickness.

for example for bold

font-weight: bold;

or you can select the numeral settings

font-weight: 300;
font-weight: bold;

<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>

You see how the font family is Oswald, yet it has two different fonts 400 & 300. Is there are way to select it?

The font enables you to use two different font-weight. So, you just have to set the font-weight when you use this font.

you can select them using the font-weight attribute like so.

font-weight: 300

Ohh okay, makes sense! Thank you

no problem. Glad I could help.

For example, with the following font file, you can apply the font with 2 different font weights.

<html>  
  <head>    
    ...    
    <!-- this font file enables you to use both font-weight=300 and font-weight=400 -->    
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>    
    ...  
  </head>  
  <body>     
    <p style="font-weight: 300">       
      Content with font-weight=300     
    </p>          
    <p style="font-weight: 400">       
      Content with font-weight=400     
    </p>  
  </body>
</html>