How to use roboto font in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to use roboto font in bootstrap 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.

To use roboto 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, roboto-family

This will show a link to use, something like:

  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Roboto:wght@100&family=Water+Brush&display=swap" rel="stylesheet">

and a css code to put, something like:

font-family: 'Roboto', sans-serif;

Step 2: Put in your Html

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

<html>
<head>
..
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Roboto:wght@100&family=Water+Brush&display=swap" rel="stylesheet">
..
..
</head>
</html>

And, in your website css file,

body {
    font-family: 'Roboto', sans-serif;
}

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:wght@300;400&family=Roboto:wght@100&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: 'Roboto', sans-serif;
}

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

Check the output of the above code example.

Bootstrap, google-font

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts