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/streamit-design-system/_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:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300&display=swap" rel="stylesheet">
_variable.scss 
$font-family-sans-serif: 'Roboto', -apple-system, "Segoe UI", Roboto, "Helvetica Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: 'Roboto', sans-serif, "Liberation Mono", "Courier New", monospace !default;
Previous Next