Customizing Typeface

Guide to include or change typeface (fonts).


1. Linking your Local and Google font in HTML

To include your local font, add your local fonts in app/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 Local font -->
  <link rel="stylesheet" href="./fonts/typography-font/typo.css">

  <!-- Or, -->

  <!-- Linking Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap">


    

Import (Alternate way of linking)

Alternately, you can import your google fonts in both SCSS and CSS.

In SCSS: To import your typeface in SCSS, open the _fonts.scss in app/scss/bs-theming directory and paste the import code at the very top of the file. Import url example given below.

In CSS: To import your typeface in CSS, open the main.css in dist/css/ directory and paste the import code at the very top of the file. Import url example given below.


@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,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 SCSS:

Open the _fonts.scss in app/scss/bs-theming/ directory and replace the value of the $font-family-base variable with your font-family name.


  $font-family-base:            'Rubik', sans-serif;

Calling the font family in CSS:

Open settings.css in dist/css/ directory and change the font-family value given in body with your value. Example given below.


    body{
      font-family: 'Rubik', sans-serif;
    }