How to use different kind of Google Font types?


Tags: css,fonts

Problem :

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

    CSS Howto..

    How to make

    How does a GPL license restrict commercial web applications? [closed]

    How to layer box-shadows using z-index?

    How do I animate background image size on hover smoothly in css?

    How to colorize an image in CSS?

    How to solve this (seemingly simple) formatting problem in CSS?

    How can you hide CSS from the iPhone, but not other browsers?

    How to calculate the multiplication factor for scroll speed on another element so that they both reach end at the same time (top of view)

    How do I code CSS to “change” when I load/pull content using ajax?

    How do I reduce the space between my menu titles and items?

    How to debug(make page look like in Firefox) CSS in IE? [duplicate]

    How to inherit from ancestor and not parent in CSS?

    How do I change ASP.NET App_Themes based on what Skin is selected in RadSkinManager?

    How can I animate my div to go from top to bottom whithout interfering with the content inside?

    How to replace @media (max-width) using Stylish or Greasemonkey?

    How to truly align center of two elemnts with css?

    How to center li tags list

    How can I set the System.Web.Optimization bundler to correctly transform ISO unicode

    How to access this children div

    How to change html td background colour through Javascript?

    how to prevent shifting when changing border width

    how to style in css: product…(price)?

    How to remove IconTabFilter icons using css?

    How to apply padding to an HTML input element?

    How to place divs one next to another without floatant?

    how to make the images always in center

    how do I zoom a background image on a div with background-size

    How to preserve CSS using iTextSharp?

    How to check if svg element supports css transform

    How to remove free jqgrid own horizontal scrollbar if autowidth:true is used