Adding a Custom Font to a SuiteCommerce Custom Theme

Step-by-Step Guide: Adding a Custom Font in VSCode

Follow these steps to add a custom font to your SuiteCommerce custom theme using VSCode.

Step 1: Set Up Your VSCode Workspace

1. Open Your Theme Project in VSCode:

• Launch VSCode and open your SuiteCommerce theme folder (e.g., ~/SuiteCommerce/Workspace/MyCustomTheme).
• Ensure the folder contains the standard SuiteCommerce structure (Modules, Assets, Templates, etc.).
• Use File > Open Folder to select your theme directory or drag the folder into VSCode.

1. Install SuiteCommerce Extensions:

• In VSCode, go to the Extensions panel (Ctrl+Shift+X or Cmd+Shift+X on Mac).
• Install recommended extensions like:
• ESLint for JavaScript/SCSS linting.
• SCSS IntelliSense for Sass autocompletion.
• NetSuite SuiteScript for SuiteCommerce-specific support (if available).

1. Verify Theme Developer Tools:

• Open the VSCode Terminal (Terminal > New Terminal or `Ctrl+“).
• Run npm install to ensure all dependencies (e.g., Gulp, SuiteCommerce CLI) are installed.
• Run gulp to verify your local environment is set up correctly. This starts the local development server and watches for file changes.

Step 2: Add Font Files to Your Theme

1. Create a Fonts Folder:

• In VSCode’s Explorer panel, navigate to the Assets folder in your theme (e.g., MyCustomTheme/Assets).
• Right-click Assets, select New Folder, and name it fonts.

1. Copy Font Files:

• Obtain your font files (e.g., myfont.woff, myfont.woff2) from a source like Google Fonts or a licensed provider.
• Drag and drop the font files into the Assets/fonts folder in VSCode’s Explorer, or use File > Add File to upload them.
• Confirm the files appear in Assets/fonts (e.g., Assets/fonts/myfont.woff).

Step 3: Define the Custom Font with @font-face in VSCode

1. Open the Theme’s SCSS File:

• Navigate to your theme’s main stylesheet, typically located at Modules/[YourThemeName]/Sass/_theme.scss or Assets/css/custom.css.
• Double-click the file in VSCode’s Explorer to open it.

1. Add @font-face Rule:

• In the SCSS/CSS file, add the following code to define your custom font, replacing MyCustomFont and file paths with your font’s details:

@font-face {
  font-family: 'MyCustomFont';
  src: url('/assets/fonts/myfont.woff2') format('woff2'),
       url('/assets/fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

Save the file (Ctrl+S or Cmd+S).