bootstrap
  1. bootstrap-custom-fonts
PreviousNext

Bootstrap Custom Fonts

Bootstrap allows you to easily customize the fonts used in your website to give it a unique look and feel. In this guide, we'll show you how to customize the fonts in Bootstrap.

Syntax

To customize the fonts in Bootstrap, you need to include the following CSS code in your HTML file:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap');

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

In the above example, we're importing the "Open Sans" font from Google Fonts and setting it as the font family for the body element.

Example

Here's an example of how you can use Google Fonts to customize the fonts in your Bootstrap website.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Custom Fonts</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+VqnCGM1dh8/iNqVYjW9CrOv/Zw8ZR0JuQ5NIp" crossorigin="anonymous">
  <!-- Google Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is a Bootstrap website with custom fonts.</p>
</body>
</html>
Try Playground

Explanation

In the above code, we used the @import rule to import the "Open Sans" font from Google Fonts. We then set the font-family property for the body element to 'Open Sans', sans-serif. This tells the browser to use the "Open Sans" font for all body text.

Use

Customizing fonts in Bootstrap is a great way to give your website a unique look and feel. You can choose from a variety of fonts available on Google Fonts or other font repositories.

Important Points

  • You can customize the fonts in your Bootstrap website by using CSS.
  • One way to customize fonts is by importing fonts from Google Fonts.
  • To use custom fonts, you need to add the font files to your website and reference them in your CSS.

Summary

Bootstrap makes it easy to customize the fonts in your website. With its built-in support for Google Fonts, you can easily choose from a variety of fonts to give your website a unique look and feel.

Z-indexIcons
Published on: