Add a custom Web Font

We can add a new font to suite commerce webstore as a part of customization. there are some steps to follow for adding a new font to your NetSuite Commerce web store.

• Download the google font that you needed to add in the store
• Create a folder name fonts inside the assets folder
• Add the downloaded font in the folder “Font”
• Then open the font folder inside Module > BaseSassStyles >Fonts
• Create a new Sass file inside the font folder for newly created font
• Then open the _main-variable.scss file from BaseSassStyles
• import the newly added Sass file of Font inside the _main-variable.scss
  • using syntax: @import “Fonts/Fontname.scss”;
• Add the typography by opening the folder Module > BaseSassStyles > Variables > _typography.scss file
  • assign the font to a variable name for to use it later in customization, for example:
  • $sc-font-family: “Open Sans”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
  • $sc-font-family1: “Roobert”;
  • $sc-font-family2: “Neue Helvetica”;
  • $sc-font-family3:”Inter”;

Example of Sass file created for the Roobert font

/* #### Generated By: http://www.cufonfonts.com #### */
$fonts-path: getThemeAssetsPath("Fonts");

@font-face {
    font-family: "Roobert";
    font-style: normal;
    font-weight: 400;
    src: url("#{$fonts-path}/Roobert-Regular.woff") format("woff"),
        url("#{$fonts-path}/Roobert-Light.otf") format("otf");
}

@font-face {
    font-family: "Roobert";
    font-style: normal;
    font-weight: 300;
    src: url("#{$fonts-path}/Roobert-Light.woff") format("woff"),
        url("#{$fonts-path}/Roobert-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Roobert";
    font-style: normal;
    font-weight: 500;
    src: url("#{$fonts-path}/Roobert-Medium.woff") format("woff"),
        url("#{$fonts-path}/Roobert-Medium.otf") format("otf");
}
@font-face {
    font-family: "Roobert";
    font-style: normal;
    font-weight: 600;
    src: url("#{$fonts-path}/Roobert-SemiBold.woff") format("woff"),
        url("#{$fonts-path}/Roobert-SemiBold.otf") format("otf");
}