Font

Steps to be followed to change font in the template:

  • You can define multiple sources for the same font family, each with a different fontStyle.
  • To change the font family you will have to import the font at templates/components/partials/head.hbs file. You can also import particular google fonts. After adding font url you have to update that particular font at scss/_variables.scss

Here is the Change font from template in gulp+scss+hbs

head.hbs 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap; rel="stylesheet">
_variable.scss 
$font-family-monospace:      'TeXGyreAdventor', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-sans-serif:       'Roboto', sans-serif, "Liberation Mono", "Courier New", monospace !default;
Previous Component