Skip to main content

Typography

Learn how to customize Onekit typography.

How to include a typeface?

Add or change Onekit typography with the following instructions.

With SASS:

Editing font style from src/scss/_variables.scss

  1. Use the $font-primary attribute as our typographic base applied to the <body> in _variables.scss file to change the current font family variable with yours. We only use $font-primary in default font family

                    
                  // Font Family
                  $font-primary:                                               "Poppins", 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=Poppins:wght@400;500;700&display=swap" rel="stylesheet">

    You can use & font style with &, space with %3A, font weight with %2C and font family with %7C

Typography Size

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

Edit this scss

            
              // Font Sizes
              $font-size-base:              1rem !default;
              $h1-font-size:                $font-size-base * 2.5 !default;
              $h2-font-size:                $font-size-base * 2 !default;
              $h3-font-size:                $font-size-base * 1.75 !default;
              $h4-font-size:                $font-size-base * 1.5 !default;
              $h5-font-size:                $font-size-base * 1.25 !default;
              $h6-font-size:                $font-size-base !default;

              $display1-size:               $font-size-base * 4.375 !default;
              $display2-size:               $font-size-base * 3.8125 !default;
              $display3-size:               $font-size-base * 3 !default;
              $display4-size:               $font-size-base * 2.8125 !default;
              $display5-size:               $font-size-base * 2.6875 !default;
              $display6-size:               $font-size-base * 2.5 !default;