How to use regular, light and bold fonts use link from google fonts?

Question

I need three types of Ubuntu font. I don't want to download them.

I put this link in the tag: <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet">

In Google tutorial: "Use the following CSS rules to specify these families: font-family: 'Ubuntu', sans-serif;".

How can I use Ubuntu Light and Ubuntu bold fonts? As I see it is not the same as font-weight: bold ; or font-weight: 300 ;.

Answer 1

This is the link to use in the <head> tag:

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

within your CSS file use:

font-family: 'Ubuntu', sans-serif;

and

font-weight: 300

Answer 2

font-weight 300 is equivalent of light, 400 is regular and 500 is medium. you should add light and medium fonts to your link like as

link to google font:

<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500" rel="stylesheet"/>

css:

body {
  font-family: 'Ubuntu', sans-serif;
 }
.light {
  font-weight:300; 
 }
.regular{
  font-weight:400; 
}

.medium{
  font-weight:500; 
   }