How to use different kind of Google Font types?

I want to use a Google Font with different types (Light, Black, Semi-bold).

This is the link for the Google Font: https://fonts.googleapis.com/css?family=Exo+2:300,400,600,900

The regular is working fine, font-family: 'Exo 2'; But I was wondering how I can use the Light, Black ones. I've tried Exo 2 Black/Light but that didn't seem to work.

I've also read the documentation, but that didn't have the answer also.

Solution

You first have to load you font in the document's head and than use the font in conjunction with the right font-weight in your CSS.

PS: You got a little typo in your font URL.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Website</title>
  <link href="https://fonts.googleapis.com/css?family=Exo+2:300,400,600,900" rel="stylesheet">
  <link href="path/to/styles.css" rel="stylesheet">
</head>
<body>
  …
</body>
</html>

styles.css

.light {
  font-family: 'Exo 2';
  font-weight: 300;
}

.normal {
  font-family: 'Exo 2';
  font-weight: 400;
}

.semi-bold {
  font-family: 'Exo 2';
  font-weight: 600;
}

.black {
  font-family: 'Exo 2';
  font-weight: 900;
}