Skip to main content

Typography

Learn how to customize Bootnews typography.

How to include a typeface?

Add or change Bootnews typography with the following instructions.

With SASS:

Editing font style from assets/scss/_variables.scss

  1. Use the $font_1 and $font_2 attribute as our typographic base applied to the <body> in _variables.scss file to change the current font family variable with yours.

                    
                  //body fonts
                  $font-family-sans-serif:      "Roboto", sans-serif !default;

  2. Add your font stylesheet into the <head> before all other stylesheets. Like:

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

With CSS:

  1. Simply replace the font family font-family from <body> in theme.css tag with yours.

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

    And this css

                    
                  /*------------------------------------
                    Google Fonts
                  ------------------------------------*/
                  .font-family h1, .font-family h2, .font-family h3, .font-family h4, .font-family h5, .font-family h6, .font-family .h1, .font-family .h2, .font-family .h3, .font-family .h4, .font-family .h5, .font-family .h6 {
                    font-family: "Roboto", Helvetica, sans-serif;
                  }

                  .font-family .navbar-nav {
                    font-family: "Roboto", Helvetica, sans-serif;
                  }

                  .font-special {
                    font-family: "Roboto", Helvetica, sans-serif !important;
                  }

  2. Add your font stylesheet into the <head> before all other stylesheets. Like:

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

Typography Size

You can editing typograpy size from assets/scss/_variables.scss

Edit this scss

            
              $font-size-base:              1rem !default;

              $h1-font-size:                $font-size-base * 1.5 !default;
              $h2-font-size:                $font-size-base * 1.375 !default;
              $h3-font-size:                $font-size-base * 1.25 !default;
              $h4-font-size:                $font-size-base * 1.125 !default;
              $h5-font-size:                $font-size-base !default;
              $h6-font-size:                $font-size-base * .875 !default;

              $display1-size:               3.6rem !default;
              $display2-size:               2.4rem !default;
              $display3-size:               2.0rem !default;
              $display4-size:               1.8rem !default;