C.Ronaldo C.Ronaldo - 1 month ago 11
CSS Question

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: https://fonts.googleapis.com/css?family=Exo+2:300,400,600,90

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.

Answer

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,90" 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;
}