How to use custom font in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to create use custom font for Bootstrap 5 projects.

To begin, open fonts.google.com. Search for the font named Open Sans using the search bar at the top of the page. The search results will list the matching term, which is a link taking you to the google fonts open sans page. On this page, there is a list of several font styles. Each one of these font weight and style combinations is a unique font file that the browser will download.

Bootstrap, open, sans

Next, copy the <link> tags necessary to load the files from the Google Fonts service. To do that, select the <link> option instead of the @import option as the way to load the files in the Google Fonts interface. Copy the series of <link> tags presented. Then, return to index.html in your text editor. Go inside the <head> element and, after the <link> tag loading styles.css, paste the <link> tags from Google Fonts. HTML in the following code block demonstrates where to add the copied code:

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=Roboto:[email protected]&family=Water+Brush&display=swap" rel="stylesheet">
    <title>Font Family Page</title>
    <link href="styles1.css" rel="stylesheet" />
</head>

<body>
    <main>
        <header>
            <div class="content-width sans">
                <h1>The standard Lorem Ipsum passage</h1>
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua".</p>
            </div>

        </header>

        <div class="content-width sans-serif">
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua".</p>

            <h2>The standard Lorem Ipsum passage</h2>

            <p>"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. </p>

        </div>

        <div class="content-width monospace">
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua".</p>

            <h2>The standard Lorem Ipsum passage</h2>

            <p>"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. </p>

        </div>
    </main>
</body>

</html>

Save your changes to index.html, then return to styles.css in your text editor. In your body selector, go to the font-family property. Prepend the value with the font name “Open Sans” in quotes before the “PT Sans” font, followed by a comma.

body {
    margin: 0;
    background-color: hsl(0, 0%, 100%);
    color: hsl(0, 0%, 10%);
    line-height: 1.5;
    font-family: 'Open Sans', sans-serif;
}

.content-width {
    max-width: 70ch;
    width: calc(100% - 4rem);
    margin: 0 auto;
}

main {
    margin-bottom: 4rem;
}

header {
    margin-bottom: 4rem;
    padding: 2rem 0;
    background-color: hsl(177, 50%, 40%);
    color: hsl(300, 50%, 90%);
}

header p {
    color: hsl(300, 50%, 85%);
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.25;
}

h2,
h3 {
    color: hsl(189, 50%, 40%)
}

.sans {
    font-family: "Roboto", sans-serif
}

.serif {
    font-family: "Roboto Slab", serif
}

.monospace {
    font-family: "Roboto Mono", sans-serif
}

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

Check the output of the above code example.

Bootstrap, open, sans

Implementation custom font:

CSS

 html {
   font-family: sans-serif
 }
 body {
   font-family: sans-serif
 }
 code, kbd, pre, samp {
   font-family: monospace
 }
 button, input, optgroup, select, textarea {
  font-family: inherit
 }
 .tooltip {
   font-family: sans-serif
 }
 .popover {
   font-family: sans-serif
 }
 .text-monospace {
  font-family: monospace
 }

Bootstrap, Fonts, Family

All the best 👍