How to Import Google Fonts in CSS File

An essential part of any design is the chosen font. Google Fonts is a free service of web fonts that allows us to use a large variety of fonts in our CSS file.

In this snippet, you'll find two ways of importing Google Fonts. You can use either the CSS @import rule or HTML <link> tag. It's quite easy to do, but first, we'll explain how to import the font you want. Google Fonts can generate the code automatically based on the font that you want to add to your webpage. Open Google Fonts and follow these steps:

  1. Find the font and click it (a card with the font), then, click "+ Select this style". On the right side, you'll see a container with the name "Selected family".
  2. Click "Embed" and choose <link> or @import depending on where you need to add the font (in HTML or CSS).
  3. Copy/paste the codes you need.

First, we’ll demonstrate an example with the @import rule.

Create HTML

  • Use <h1> as a heading tag and write content in a <p> tag.
<h1>Lorem Ipsum</h1>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p>

Add CSS

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
body {
  font-family: 'Muli', sans-serif;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: -.003em;
  font-size: 20px;
  padding: 70px;
}

h1 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: rgba(0, 0, 0, 0.8);
  -webkit-font-smoothing: antialiased;
}

Now, you can see the final code.

Example of importing two Google Fonts with the @import rule:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
      @import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
      body {
        font-family: 'Muli', sans-serif;
        color: rgba(0, 0, 0, 0.8);
        font-weight: 400;
        line-height: 1.58;
        letter-spacing: -.003em;
        font-size: 20px;
        padding: 70px;
      }
      h1 {
        font-family: 'Quicksand', sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 38px;
        line-height: 1.15;
        letter-spacing: -.02em;
        color: rgba(0, 0, 0, 0.8);
        -webkit-font-smoothing: antialiased;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>

In the example above, we imported only two Google Fonts. They must always be the first line in the CSS file. It isn't recommended to import too many fonts so as to provide better loading speed.

Let’s see another easier example where we import only one font.

Example of importing a Google Font with the @import rule:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
      h1 {
        font-family: 'Lora', serif;
        color: #000000;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
  </body>
</html>

It is also possible to import Google Fonts using the HTML <link> tag. You must add it to the header.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
    <style>
      h1 {
        font-family: 'Dosis', sans-serif;
        color: #777777;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
  </body>
</html>
Do you find this helpful?

Related articles