How to add Google fonts in your web project

by  
Share:
how to add google fonts in your web project

Google fonts are awesome, I mean it literally. I am among those who are obsessed over little details, and picking fonts is one of them. Every time I start a project selecting fonts from the Google fonts library is exhausting, but integrating Google fonts in the web project is just a 2-minute job. In this tutorial, I am going to show you how to add Google fonts in your web project in the easiest possible way.

Selecting Google Fonts

Step 1. Visit the Google Fonts web page. https://www.google.com/fonts

Step 2. Select the font of your choice. In my case, I choose one of my favorite font Josefin Sans.

Choosing Google Fonts

Step 3. If the font has variations, select the variation of your choice (you can select multiple as well), In my case, I choose Medium 500.

Google Font variation selection

Embed Google Font directly through link

Now, that we have already selected the font, We just copy the code provided by Google Fonts and embed it in our web page.

Embed Google Fonts to web page

As you can see in the the picture above, Copy the embed code mention in step 2  and paste inside your <head> tag. and then add font family mention in step 3 to CSS rules.

Tip: If you want to apply the font to the whole project, use in  body rule or if you want to apply in  headings use  h1, h2, h3, h4, h5, h6 or if you want to use in some custom class add .yourclassname

Take a look at the final code to embed a single google font to whole web page.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--Embed the font -->
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap" rel="stylesheet"> 
        
        <!-- Adding font family to the style -->
        <style>
            body{
                font-family: 'Josefin Sans', sans-serif;
                font-size: 14px;
                line-height: 22px;
            }
        </style>
    </head>
    <body>
        <h1>How to add Google fonts in your web project </h1>
        <p>Google fonts are awesome, I mean it literally. I am one of those who are obsessed over little details, and picking fonts is one of them. Every time I start a project selecting fonts from their tons of beautiful fonts library takes a lot of my time, but integrating Google fonts in the web project is just a 2-minute job. In this tutorial, I am going to show you how to add Google fonts in your web project in the easiest possible way.</p>
    </body>
</html>

This is how the web page will look like.

Goolge Font embed link output

Add Google Font to css file

You have already seen how to embed Google font, but that was not the only way to do it. I am going to show you another way to do the same stuff.

The process is same, First you select the font, then under Embed Tab, select @import link, copy the link code and paste in your CSS file. Apply the font family to your CSS rules.

Google Font import to css

Here’s how the your CSS file will look like.

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap');
body{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    line-height: 22px;
}
h1{
    font-size: 30px;
}

Link your CSS file to your main web page.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
         <!-- Adding css file -->
        <link rel="stylesheet" href="style.css" media="all">
    </head>
    <body>
        <h1>Embed Single Google Font to Whole Page</h1>
        <p>Google fonts are awesome, I mean it literally. I am one of those who are obsessed over little details, and picking fonts is one of them. Every time I start a project selecting fonts from their tons of beautiful fonts library takes a lot of my time, but integrating Google fonts in the web project is just a 2-minute job. In this tutorial, I am going to show you how to add Google fonts in your web project in the easiest possible way.</p>
    </body>
</html>

As you can see the result is same, but the technique was different. Choose whichever way you want.

Goolge Font embed link output

How to add Multiple google fonts to CSS

You have already learned how to add google fonts to your web page using embed and import technique. Let us also learn how to add multiple google fonts in your web page.

I will be using Josefin Sans for headings and Open Sans for overall body. Once I select both fonts, this is how the font selection tab will appear.

Multiple Google Font Selection

You can use whichever technique you like, but I am going to use the embed link in head tag technique. Just copy the code for multiple google fonts.

Multiple Google Font Selection Code

The final step is to add the code in your web page, Since I have already mentioned I am going to use Josefin Sans in header and Open Sans for all the web page. Additionally, I have made a class name .custom-style that use Josefin Sans font. Take a look at the code below.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&family=Open+Sans&display=swap" rel="stylesheet"> 
        <style>
            body{
                font-family: 'Open Sans', sans-serif;
                font-size: 14px;
                line-height: 22px;
            }
            h1{
                font-family: 'Josefin Sans', sans-serif;
                font-size: 30px;
            }
            .custom-style{
                font-family: 'Josefin Sans', sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>Embed Multiple Google Fonts</h1>
        <p>Google fonts are awesome, I mean it literally. I am one of those who are obsessed over little details, and picking fonts is one of them. Every time I start a project selecting fonts from their tons of beautiful fonts library takes a lot of my time, but integrating <span class="custom-style">Google Fonts</span> in the web project is just a 2-minute job. In this tutorial, I am going to show you how to add Google fonts in your web project in the easiest possible way.</p>
    </body>
</html>

Here’s how the final output will look like.

Multiple Google Font Output

Best Google Font to use in your project

Let me know your favorite Google Font and I will be happy to update it in the list.

Icon
How to add Google fonts in your web project
File Size: 2.77 KB

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.