Add custom font in SCA

This post explains how to add custom font or web fonts or google fonts to SCA. This is only applicable for SCA version Aconcagua and later

https://developers.suitecommerce.com/add-a-custom-web-font

Download the font files from Google fonts, add the fonts to Assets folder

Create new folder in Base sass style for fonts

$fonts-path: getThemeAssetsPath("Fonts"); //DEFINE FONT PATH, THIS PATH DIRECTS TO THE FOLDER WE CREATED IN ASSET FOLDER

@font-face {
    font-family: 'JosefinSans';
    src: url('#{$fonts-path}/JosefinSans/static/JosefinSans-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'JosefinSans';
    src: url('#{$fonts-path}/JosefinSans/static/JosefinSans-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}


@font-face {
    font-family: 'JosefinSans';
    src: url('#{$fonts-path}/JosefinSans/static/JosefinSans-ExtraLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

Now you can call the font family in typography.scss file