How to use roboto font in bootstrap?
May 05, 2022Hi 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.
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.
All the best 👍
