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 default / 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:

default / assets / scss / main.scss

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 default / assets / scss / abstracts / _variables.scss

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

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 will need to run following commands in your terminal after reaching to the project folder:

$ npm run default-watch-style-sass

$ npm run default-css-prefix