In order to customize the font, you will need to follow max of 3 steps as described below:

Step 1 - Import Font

In case, you are using a custom web-font-kit, First of all you will need to copy your web-font-kit folder into the {starter-template} / assets / fonts/ location.

To write the import statement for the font you want to use in your theme, you will need to open the following file and put your import statement in there:

{starter-template} / assets / scss / main.scss

NOTE: In case, you are working with default/ template then use the one of the specific theme you want:

• {starter-template}/assets/scss/main-dark.scss In case of dark theme.
• {starter-template}/assets/scss/main-light.scss In case of light theme.
• {starter-template}/assets/scss/main-semidark.scss In case of semi-dark theme.

Your import statement will look something similar to below:

@import "../fonts/noir-pro/styles.css";

NOTE: If you are importing a font from Google Fonts or a similar resource, then all you need to do is use the resource url they provide in the import statement instead of using the file path.

Step 2 - Change Font Variables in Sass

All the sass variables related to font could be found in the file {starter-template} / assets / scss / themes / default / _variables.scss

Now, you can change value of these variables (font-family, weight, size etc.) as per your selected font.

NOTE: In case, you are working with default/ template then use the one of the specific theme you want:

• {starter-template}/assets/scss/themes/dark-theme/_variables.scss In case of dark theme.
• {starter-template}/assets/scss/themes/light-theme/_variables.scss In case of light theme.
• {starter-template}/assets/scss/themes/semidark-theme/_variables.scss In case of semi-dark theme.

Step 3 - Generate CSS files from SCSS

This step is to compile the changes we have made in SCSS files and generate the CSS version of those. For that, you can follow the Step-3 NPM Commands defined on Setup Drift topic.