How to Use Google Fonts in HTML and CSS

How to Use Google Fonts in HMTL and CSS

Standard Fonts are very limited that’s why everyone wants to use Google fonts on their websites. Google Fonts are very easy to use and available for free. You can choose any font from the list of thousands. This tutorial will show you the exact steps on how to use google fonts.

Let’s begin with the introduction.

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.

How to Use Google Fonts

We have three different methods to implement Google fonts in a website.

  1. By using a special stylesheet link
  2. Downloaded fonts by using CSS
  3. Using Google Fonts API

Before going to see each method, first, you need to decide which font you want to use on your website. There are thousands of font families to choose from. I am going to use “Ms Madi” font for this tutorial to demonstrate the whole process.

Don’t worry, you can pick any font. You just need the name of your font family. Decided? Let’s see how to use Google Fonts.

Method 1: Use Google Fonts Through Stylesheet Link

You will get the stylesheet link from the Google fonts site. Let’s see how.

Step 1: Go to Google Fonts Site

google fonts site

Step 2: Find and Select Your Desired Font

Just type the name of the font family that you have already decided on and hit enter. For example, I entered “Ms Madi” in the search bar as shown in the image below.

type name and select google font

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

Step 3: Choose the Font Styles

After clicking on your desired Google font, this will take you to the page where you can choose the different font styles. 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 the “Regular” font style as shown below.

Click on the plus icon given in front of every font style to use that Google font style in HTML and CSS. Also, you can choose multiple font styles.

select font style

Step 4: Copy Stylesheet Link

After selecting the font style, it will generate a special stylesheet link. If you see on the right side, there is a sidebar showing the fonts that you have selected so far. You can see the special stylesheet link as shown in the image below. Just Copy the link.

copy selected google fonts link

Step 5: Paste the Stylesheet Link in HTML <head> tags

Now, you need to paste this link in the <head> tags of HTML to use this Google font.

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 the next method. Let’s see the next step.

Step 6: Apply this Google Font to your Website using CSS

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 font families

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 to use Google fonts using the stylesheet link. But what if you want to use more than one font? Let’s go ahead and see.

How to Use 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 into the head section of your site.

multiple fonts example

Remember there will be only 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

After adding the links in the head tags, you have to specify all those fonts in your CSS stylesheet to use them 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 in the next method on how to use Google fonts through API.

Method 2: Using Fonts Through 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 put the stylesheet link in the <head> section of the HTML that you copied. The link that we have been used earlier is shown below.

<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 modification in the link URL to use different google font families.

Look at the base URL below, this base URL always remains the 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 + the 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 separate 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 as follows:

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

This is how to use Google fonts using API. What if you have downloaded Google fonts? Downloaded fonts are often used for websites.

Let’s see how to use downloaded Google fonts in HTML and CSS.

Method 3: How to Use Downloaded Google Fonts

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, we use @font-face CSS rule.

First, you need to download the Google font files on your PC. These files will be in zip format.

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

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

Step 1: Go to the Google fonts site.

Step 2: Find and select your desired Google font

Step 3: Choose font family styles.

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

Step 4: 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 5: 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 6: Copy-Paste all Google font files into your Project folder

Select and 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 “web fonts” where I will keep the font files. So, that I can use Google fonts by just specifying this location using CSS.

create a folder to keep google font files

Then, paste your font files into 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 7: Use @font-face the rule in CSS to Implement Downloaded Google Fonts

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

@font-face syntax:

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

There are two properties used inside @font-face rule:

  1. font-family: to specify the font name.
  2. src: to specify the font path inside the url() function.

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

use download google fonts in css

You can use the @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 the 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 this same method, you can use multiple downloaded Google fonts in HTML and CSS.

Additionally, you can use font-weight property inside the rule to specify the font-weight e.g., 800700600bold, 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 between 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.

Also read about: The 4 Different Types of Font-Families.

If you have any questions, just leave a comment below. And don’t forget to help others by sharing this guide.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Scroll to Top