How to Implement Custom Font Families in SuiteCommerce Advanced (SCA) Aconcagua+

The process for integrating custom font families into SuiteCommerce Advanced (SCA) involves several key steps, particularly for Aconcagua release and later, where themes and extensions are the recommended approach. For optimal browser support, it is best to provide each font in multiple formats: TTF/OTF, WOFF, WOFF2, SVG, and EOT. If only one file type is available, TTF and OTF offer the broadest support.

1. Locate or Create Theme/Extension and Font Directory

   For SCA Aconcagua release and later, custom fonts are typically managed within themes and extensions. The best practice is to store custom fonts in the 'assets' folder of a theme or extension. Within this 'assets' folder, create a 'fonts' subfolder (e.g., ThemeName/assets/fonts/) and copy the client-provided font files into it.

2. Include Fonts in Gulp Compilation

   Edit the ns.package.json file within your theme or extension to include the fonts in the compilation process. This ensures that the font files are processed and deployed with your theme.

json{  "gulp": {    "sass":[        "Scss/**/*.scss"    ],   "fonts": [        "assets/fonts/*"    ]  }}

1. Declare New Font Face

   In your theme's SCSS files (e.g., Sass/_base.scss or a dedicated font SCSS file), declare the new font face using @font-face rules. Assign a descriptive font-family name and include all provided file-type versions. Ensure the src URL correctly points to the font files relative to the SCSS file.

css@font-face {   font-family: 'FontName';   src: url('../fonts/filename.eot');   src: url('../fonts/filename.eot') format('embedded-opentype'),url('../fonts/filename.woff') format('woff'),url('../fonts/filename.ttf') format('truetype'),url('../fonts/filename.svg') format('svg');   font-weight: normal;   font-style: normal; }

For full web support, declare alternative @font-face rules for bold and italic versions of the font, using the same FontName value but varying font-weight and font-style properties, pointing to their respective source files.

css@font-face {    font-family: 'FontName';    src: ...    font-weight: bold;}@font-face {    font-family: 'FontName';    src: ...    font-style: italic, oblique;}@font-face {    font-family: 'FontName';    src: ...    font-weight: bold;    font-style: italic, oblique;}

1. Set New Font as Primary for the Site

   In your theme's SCSS (e.g., Sass/_reset.scss or a global styling file), locate the section that sets the font-family for html and body elements. List your new custom font family before default fonts like "Open Sans" to ensure it is prioritized. Retain trailing fallback values for graceful degradation.

csshtml,body {    font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;}

Modify this to:

csshtml,body {    font-family:"FontName", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;}

1. Test and Deploy

   Use gulp local to test the changes in your local development environment. Once satisfied, while gulp deploy can be used for deploying assets, for SCA Aconcagua release and later, themes and extensions are deployed to an account and then activated through the NetSuite interface.