Typography

Learn how to customize Front typography.

How to include a typeface?

Add or change Front typography with the following instructions.

With SASS:

  1. Use the $g-font-family-base attribute as our typographic base applied to the <body> in _variables.scss file to change the current font family variable with yours. 
                    
                  $g-font-family-base: "Poppins", Helvetica, Arial, sans-serif !default;
  2. Add your font stylesheet into the <head> before all other stylesheets. Like: 
                    
                  <!-- CSS Global Compulsory -->
                  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600">

With CSS:

  1. Simply replace the font family font-family from <body> in front.css tag with yours. 
                    
                  body {
                    font-family: "Poppins", Helvetica, Arial, sans-serif;
                  }
  2. Add your font stylesheet into the <head> before all other stylesheets. Like: 
                    
                  <!-- CSS Global Compulsory -->
                  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600">