Customizing Typeface

Guide to include or change typeface (fonts).

1. Linking your Local font in HTML

To include your local font, add your local fonts in app/fonts/text-fonts/typography-font/ directory and link the local font styles containing file (in our case typo.css) in your HTML

In the same manner, copy your google font linking url and link it in the HTML code.


  <!-- Linking Font -->
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

2. Calling the font family:

The final step of adding or changing your typeface is calling the font family in your stylesheet.

Calling the font family in CSS:

  font-family: 'Inter Tight';
Calling the font family in CSS:

Open style.scss in assets/css/ directory and change the font-family value given in body with your value. Example given below.


    body{
      font-family: 'Inter Tight';
    }