How to Use Google Fonts in HTML and CSS

Standard Fonts are very limited that’s why everyone wants to use Google fonts in their HTML and CSS websites. Google Fonts are very easy to use and available for free. You can choose any font from the list of thousands.

In this tutorial, I will show you the exact steps to add Google fonts to your HTML and CSS website.

In short, you can do this in two ways, one way is by using the special stylesheet link and the other way is to insert google fonts by downloading them from the site. I will show you both ways.

Let’s see what you’re going to learn in this guide.

Table of Contents

Now, let’s start with a quick introduction only for those who are new to Google fonts.

What are Google Fonts?

Google fonts is an online web fonts service offered by Google which provides thousands of open-source fonts for free. These fonts are hosted on Google’s CDN servers and are accessible from anywhere in the world.

That’s why you can use Google fonts by just putting a stylesheet link on your site. However, you can also download the font files on your PC and use them manually through CSS @font-face rule.

Now, let’s see how to use Google fonts.

How to Use Google Fonts in HTML and CSS

For this, you just need a special stylesheet link that you will get from Google fonts site. It is just a simple stylesheet link, which will allow you to use online Google fonts.

Let’s see the steps.

Step 1: Decide which font family you want to Use.

There are thousands of font families. First, you should decide which font family you’re going to use for your site. For example, I am going to use “Ms Madi” font for this guide as an example.

Don’t worry, you can pick any font. You just need the name of your font family. After deciding just go ahead to next step.

Step 2: Go to the Google Fonts Site

google fonts site

Step 3: Find and Select Your Desired Google Font

After going to the Google fonts site, just type the name of your font and hit enter. For example, I entered “Ms Madi” in the search bar as shown in the image above.

type name and select google font

When you enter the font name it will search in the Google fonts directory and show the font below. Just click on that font.

You can also choose the font type by clicking on “categories”. The font I am going to use for this tutorial is “Ms Madi” which lies in “Cursive” font type category. Fonts lies in this category mimic the human handwriting style.

You can learn more about font types in the following guide:

What are the 5 different types of generic font families?

Let’s see the next step.

Step 4: Choose the font style.

After clicking on your desired Google font, this will take you to the page where you can choose the different font styles of your selected font.

This means whether you want to use the bolder version, regular version, or italic version of the font. However, the font I opt for is only available in “Regular” font style as shown below.

select google font style

Just click on the plus icon given in front of every font style to use that Google font style in HTML and CSS. You can choose multiple styles.

Step 5: Copy the selected Google fonts link

Now, you have selected the font, it’s time to copy the Google fonts link.

If you see on the right side, there is a sidebar showing the fonts that you have selected so far.

In this sidebar, you can see the special stylesheet link as shown in the image below. Just Copy the link.

copy selected google fonts link

Step 6: Paste the Google Font links inside <head> tags of the HTML

The image below is clearly demonstrating where to paste the Google font links that you copied.

paste google fonts link in head

Remember the first two links are for speed, and those links are used to request the Google fonts first before the web page loading. However, copying those two links is not necessary but it is recommended for performance.

The third link in the above image is the special stylesheet link that is used to add Google fonts. This link contains Google fonts API, we will see more about fonts API in a minute. Let’s see the next step.

Step 7: Apply the Google Font using CSS rules

Now, the Google fonts are linked to your site. The only thing remaining is to apply the font family to the text.

To do this, first copy the CSS rule from the site as shown below.

copy CSS rule to apply google font

Now go to your CSS file e.g., style.css or <style> tags of HTML and paste the CSS rule where you want to apply the font family.

For example, I want to apply this font to h1 and h2 headings so the code will look like this as follow.

apply google fonts

This is how you can use online fonts in CSS.

Now, if you refresh the webpage in your browser then you can see the Google font is working. H1 and H2 headings are different.

google fonts are working

This is how you can add google fonts using a special stylesheet link in HTML and CSS. But what if you want to use more than one fonts. Let’s go ahead and see.

How to Add Multiple Google Fonts

The process is the same for adding multiple Google fonts. Just copy the font link from the Google fonts site and paste it in the head section of your site.

multiple google fonts

Remember there will be three links after selecting multiple Google fonts. Whether you choose just 2 fonts or 8 fonts, there will be only three links that you will see.

That’s because the change is happening in the link URL. As you can see in the image below, there are two font families “Ms Madi” & “Poppins“. Both fonts are mentioned in the URL as shown below.

multiple google font names mentioned in the URL

Now, you can refer the fonts in your CSS stylesheet to use fonts like this below.

refer multiple google fonts

The fonts are working.

multiple fonts working

You saw there multiple google fonts but only 1 stylesheet link. The reason behind this is Google fonts API that is fetching all the fonts for you in just one link.

A little bit of understanding of Google fonts API is a lot helpful and saves a lot of time. Let’s see that.

Add Fonts Using Google Fonts API

Google fonts API makes things easier. With Google fonts API, you can switch between font families, and you can use multiple web fonts without going to the Google fonts site over and over again.

The awesome thing is, you don’t need to write 100 lines of code to use API. All you need is just a stylesheet link. The link that we have been used earlier.

<link href="https://fonts.googleapis.com/css2?family=Ms+Madi&display=swap" rel="stylesheet">

This special stylesheet link contains an API. You just need to do a small change in the link URL to use different google font families.

Look at the base URL below, this base URL always remain same, no need to change anything in this.

https://fonts.googleapis.com/css

All you need to do is just specify the font name that you want to use.

For this, use ?family=font-name as shown below.

https://fonts.googleapis.com/css?family=Poppins

If the font family name is more than two words, use + symbol. For example, I want to use “Ms Madi” font family.

https://fonts.googleapis.com/css?family=MS+Madi

If you want to add multiple fonts, then separate the font names with a pipe | character like this.

https://fonts.googleapis.com/css?family=Poppins|MS+Madi

Everything after the base URL changes. So, all you need to understand is the changes. It’s a little bit complicated but not so hard.

Remember to not use space in the URL ever.

If you want to use font styles like bold or italic for your desired font family, then use colon : with the font name and sperate the styles with commas , like this below.

https://fonts.googleapis.com/css?family=Poppins:bold,italic|MS+Madi:regular,700

Put the URL in href attribute of <link> element.

<link href="" rel="stylesheet">

The complete link will look like as follows:

<link href="https://fonts.googleapis.com/css2?family=Poppins:bold,italic,800|MS+Madi:regular" rel="stylesheet">

Simple! Now, you know how to use Google fonts API to add fonts. What if you have downloaded Google fonts? Downloaded fonts are often used by web developer’s.

So, let’s see how to use downloaded Google fonts in HTML and CSS.

How to Use Downloaded Google Fonts in HTML and CSS

When we talk about using downloaded Google fonts, it means we want to use them offline not through the CDN stylesheet link. It has its pros and cons.

To use downloaded Google fonts in CSS offline, we use @font-face CSS rule.

To use downloaded Google fonts in your website, first you need to download the Google font files on your PC. These files will in zip format.

Let’s see how to do this step by step.

The First 4 steps are the same as we did in the previous method “use Google fonts via stylesheet link”. Let’s recall.

Step 1: Decide which font family you want to use.

Step 2: Go to the Google fonts site.

Step 3: Find and select your desired Google font family name.

Step 4: Choose font family styles.

Then, begin with step no. 5 which is different.

Step 5: Download the Google Fonts

You can download your selected google font by clicking on the “Download family” button. The button is located at the top, right below site header as shown below in the image.

download google font

It will download all the font styles at once in a zip file.

Step 6: Extract the zip file containing Google fonts

You can extract / unzip the zip file by right-clicking on it as shown below.

extract the zip file

Step 7: Copy-Paste all Google font files in your Project folder

Select and copy all font files or you can select of your choice.

copy all font files

For your convenience create a folder inside your project folder where you can keep all font files. For example, I created a new folder in my project folder and named it “webfonts” where I will keep the font files.

create a folder to keep google font files

Then, paste your font files in it.

paste font files in your project folder

The above step is crucial because in the next step you will have to specify the font path through CSS.

Step 8: Use @font-face rule in CSS to Use Downloaded Google Fonts

As I told earlier, CSS @font-face rule is used to specify the downloaded fonts in CSS that we want to use.

@font-face syntax:

@font-face{
 font-family: Font-Name;
 src: url("font-path");
}

We use two properties inside @font-face rule:

  1. font-family: it is used to specify the font name.
  2. src: this property is use to specify the font path inside the url() function.

The following code example shows how to use @font-face rule in CSS to specify the font.

use download google fonts in css

Use @font-face rule multiple times to specify each font style that you want to use. Each font URL will be different but the font name remains same until you use a different font family as shown below.

@font-face {
    font-family: 'Poppins';
    src: url('webfonts/Poppins-Regular.ttf');
}

@font-face {
    font-family: 'Poppins';
    src: url('webfonts/Poppins-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('webfonts/eb-garamond-Italic.ttf');
}

With the same method you can use multiple downloaded Google fonts in HTML and CSS.

Note: The code above will remain the same whether you want to add Google fonts in CSS externally or internally.

Externally mean in the external CSS file like “style.css” and internally mean the CSS code inside HTML <style> tags.

Additionally, you can use font-weight property inside the rule to specify the font-weight e.g., 800, 700, 600, bold, or bolder. It’s optional.

This is how you can use downloaded Google fonts in HTML and CSS.

Tip: I use a modern tool called “Google Fonts Helper“. This tool is awesome it generates links based on all different font file formats. All I do is just download fonts and copy paste links in my project.

Which One is the Better Way? Online vs. Offline

It’s totally up to you, because there is no big difference whether you use fonts through the CDN stylesheet link or you use downloaded fonts.

However, hosting downloaded fonts on your web server and using it, is a great idea that improves site speed. But only a little bit, no big change.

That’s all. Now, you know how to use Google fonts in HTML and CSS.

Hope you understood well and liked this guide. Don’t forget to help others by sharing this guide.