How to use google fonts in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to use google fonts in bootstrap 5 with code example.

Table of contents

  • Using Google Fonts
  • Put in your Html

Step 1: Using Google Fonts

Google font is a free service provided by Google. The service provides a wide veriety of collection of fonts free of cost.

Bootstrap, google-font-search

To use google fonts on your web design is very simple. Goto google fonts site. There are plenty of fonts with their sample text. Browse through them, and select the one you want by clicking a Plus icon on them.

Bootstrap, google-font

Copy the link.

Bootstrap, link, copy

This will show a link to use, something like:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];400&family=Water+Brush&display=swap" rel="stylesheet">

and a css code to put, something like:

font-family: 'Water Brush', cursive;

Step 2: Put in your Html

Goto your html code, paste the link in between your head section.

<html>
<head>
..
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];400&family=Water+Brush&display=swap" rel="stylesheet">
..
..
</head>
</html>

And, in your website css file,

body {

    font-family: 'Water Brush', cursive;
}

Example.

Let’s look at the following example to understand how it basically works:

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];400&family=Water+Brush&display=swap" rel="stylesheet">
    <title>Font Family Page</title>
    <link href="styles1.css" rel="stylesheet" />
</head>

<body>
    <div class="text-center">
        <h1>The standard Lorem Ipsum passage</h1>
        <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua".</h3>
        <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>

    </div>

</body>

</html>

And, in your website css file,

body {
    font-family: 'Water Brush', cursive;
}

In the above code, we have used .font-family class to google fonts in bootstrap

Check the output of the above code example.

Bootstrap, google-font-1

All the best 👍