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/socialv-design-system/_variables.scss

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

head.hbs 
<link rel="stylesheet"href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap"rel="stylesheet">
_variable.scss 
$font-family-sans-serif: 'Plus Jakarta Sans', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol","Noto Color Emoji" !default;
$font-family-monospace: 'Plus Jakarta Sans' ,SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
Previous Next