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>

How to use google fonts, and comply with privacy policy rules?

You can use Google Fonts without importing them from the Google Fonts URL by using the @font-face rule. This method allows you to download the font files and host them on your own server, so you can comply with privacy policy rules in your country.

Here's an example of how to use Google Fonts with @font-face in a separate CSS file:

  1. Go to the Google Fonts website (https://fonts.google.com/) and choose the font you want to use.

  2. Click on the "Select This Font" button to add the font to your collection.

  3. In the collection drawer that appears at the bottom of the page, click on the "Customize" button to select the font styles and character sets you want to use.

  4. Once you've made your selections, click on the "Embed" tab to view the code you need to add to your CSS file.

  5. Copy the @font-face rule from the code and paste it into your CSS file. Here's an example:

/* Import the font using @font-face */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/OpenSans-Regular.ttf') format('truetype');
}

/* Use the font in your CSS */
body {
  font-family: 'Open Sans', sans-serif;
}

In this example, we're importing the Open Sans font using the @font-face rule. The font is being downloaded from the URL "/fonts/OpenSans-Regular.ttf" on our own server, but you can host it anywhere you like. We're also specifying a local font name, which will be used if the font is already installed on the user's computer. Finally, we're using the font in the body of our CSS.

Note that you'll need to include the font file on your server and change the URL in the @font-face rule to point to the correct location.