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=Heebo:wght@300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap" rel="stylesheet">
_variable.scss 
$font-family-monospace:      'Heebo', 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 Next