C.Ronaldo C.Ronaldo - 1 year ago 161
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 Source

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.


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


.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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download