How to use google fonts in bootstrap?
April 25, 2022Hi 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.
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.
Copy the link.
This will show a link to use, something like:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;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:wght@300;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:wght@300;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.
All the best 👍
