How to Install Google Fonts to the CSS File

Would you like access to hundreds of fonts for your website? Then you need to learn how to use Google Fonts! Most web developers use Google Fonts on their websites. The article describes in detail how to choose and install Google Fonts into your CSS file.

How To Steps for Google Font Installation

Time needed: 10 minutes

How to Add Google Fonts

  1. Go to fonts.google.com

    To see all of the font choices available to you just go to https://fonts.google.com.

  2. Browse the Fonts

    Look at the fonts that are available on fonts.google.com. If you are looking for a fancy font for headings, try the Display and Handwriting filters.

  3. Choose Fonts

    After looking at all of your choices, it is time to make selections. I recommend choosing only two fonts. Choose a decorative font for headings, and a font that is easy to read for regular text.

  4. Add Fonts to Cart

    Click the Add Cart button to add the fonts you would like to your “Shopping Cart” of fonts.
    (Note: until recently, Google Fonts had a plus sign for adding fonts. How the fonts are displayed is rather a moving target.)

  5. Go to your Shopping Cart of Fonts

    After you finish adding your fonts you would like to use on your website, go to the shopping bag in the upper left corner. The fonts are free, but Google Fonts uses the analogy of a shopping cart, to show you that you can add more than one to your website with one font installation.

  6. Click the Get Embed Code Button

    Google provides the code that you need for you website. All you have to do is copy it into your website into the right location in your code. Note that you can also download any Google Font to your computer with the other button.

  7. Import the Font

    Before you can use a font on a website, you need to make the font available or use on your website by importing it. The easiest way to do this is by copying the @import tag into your CSS file. By placing the @import tag into your CSS file, you only need to import the font one time for your entire website. Choose the @import radio button, and copy the @import code. Skip the style tags, because we don’t need those if we place the @import into the CSS file. Place the @import at the TOP of your CSS file.

  8. Use the font-family property

    Last but not least, you need to add the font-family to some CSS selectors. You can copy the font-family property and value right from Google Fonts. I generally recommend selecting the body for your easy to read font, and selecting h1, h2, h3 for the headings. You can see the code below.

How to Code a Google Font

In this example I decided to use Ubuntu Sans for my regular text, and Shadows Into Light for my heading tags. First I would copy the @import tag to the top of my CSS file. Then I would add a the font-family for my regular text font, in this case the Ubuntu Sans font, to the body selector. By selecting the body, and am applying this font to the entire website. Then, for the fancier font I chose for the headings (eg. <h1>, <h2>, <h3>), I override the font I set on the body with the Shadows Into Light font.

Here is the code for these font selections:

@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap');
body{
   font-family: "Ubuntu Sans", sans-serif;
}
h1, h2, h3{
   font-family: "Shadows Into Light", cursive;
}

Note that the @import tag includes both font names and available weights for the fonts. I added the font I want to use for regular text to the body, and I override the font-family for only the h1, h2, and h3 selectors.

If you are taking a course with me, you may use any font from Google Fonts except for Ubuntu Sans and Shadows Into Light.

How to Install Google Fonts into a WordPress Website

It is easier to install Google Fonts on to a WordPress website than a hand-coded website. Most premium themes are preloaded with Google Fonts, so you simply select them from a list. If your theme doesn’t provide access to the font that you want, you can also install fonts with a WordPress plugin, like this one: