How to use custom font in bootstrap?
May 05, 2022Hi 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.
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: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>
<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.
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
}
All the best đź‘Ť
