Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Bootstrap Documentation

Fonts

By default, Profit uses the Google fonts. In case, If you want to change font to any other Google fonts, Please have a look in the head part of the webpage and you will find this tag:

To change the font, first go to Google fonts, choose your desired font and use the generated code.

If you have a need to use custom fonts, Remove above section completely and visit Self Hosted Fonts

copy

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

With SASS

  1. Open the user-variables.scss file

    The user-variables.scss file is located in the html/assets/scss/ directory of the theme package.

  2. Add below variables in the user-variables.scss
    copy
    
$font-family-base:            'Inter', sans-serif;
  3. Add below classes in the user.scss file.
    copy
    
.body {
    font-family: $font-family-base;
}
    Same way you can change font-family-heading $font-family-heading and font-family-alt $font-family-alt.
    Make sure you read the Customization guidelines and use the Build Tools

With CSS

You just need to link custom.css at the end of <head> tag of each page. CSS Method.

Simply add the font family font-family from <body> in custom.css tag with yours.

copy

body {
    font-family: "Inter", sans-serif;
}

Examples

  1. Headings

    .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

    H1 heading

    H2 heading

    H3 heading

    H4 heading

    H5 heading
    H6 heading
    copy
    
<h1>H1 heading</h1>
<h2>H2 heading</h2>
<h3>H3 heading</h3>
<h4>H4 heading</h4>
<h5>H5 heading</h5>
<h6>H6 heading</h6>
  2. Display headings

    Display 1

    Display 2

    Display 3

    Display 4

    Display 5

    Display 6

    copy
    
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>