Adding a Custom Web Font

When customizing your Commerce website, you may want to add a custom web font to comply with corporate branding guidelines or to make your site stand out. The easiest and best way to apply a web font to your site is with the @font-face rule. This rule lets you define new font families and built-in provisions for different font file types, font weights, and font styles. After your web font is defined, you can use it in your styling declaration. The following @font-face example tells the application there's a new font family. It includes the name of the font, where the font is located, and to apply the font to all text within the page's body.

          @font-face {
    font-family: "My New Cool Font";
    src: url("path/to/My-New-Cool-Font.woff");
}
body {
    font-family: "My New Cool Font";
}

Best Practices for Adding a Custom Web Font

You either need to own the font or have a font license. The specifics vary, so make sure you are compliant. Note that free fonts may have restrictions on how they can be used.
A copy of the font is distributed to visitors to your site. If you are using a corporate font or another proprietary font, you may want to add a layer of protection to the font file. To do this, use a third-party service that is designed to deliver fonts remotely using JavaScript.
Using a custom web font impacts site performance. It's an extra resource that must be loaded. It adds at least one extra HTTP request and additional CSS. Typically impact is minimal, however, it's important to remember small performance hits can quickly add up. When adding a custom web font, balance the aesthetic needs of the site with the impact it has on performance.
You can host your font remotely or with your source code as part of your customization. When you have a copy of the font and make it available as part of your customization, you have control of what is being sent. If you are hosting your font remotely, see Hosting a Font Remotely.
The @font-face rule loads synchronously, meaning it blocks the page’s loading/rendering from completing until it finishes loading. If the requested font file takes an unusual amount of time to load, it can block the text from rendering and block visitors from using your site. If you are concerned about performance, you can load the font asynchronously and apply it after the initial render using JavaScript.

To add a custom web font:

Store your custom web font. Where you store it depends on your implementation.

If you are using the Aconcagua release of SuiteCommerce or SuiteCommerce Advanced or later, store your font file in the assets folder of a theme or extension. Note that you can organize your assets folder with subfolders. For example, you may want to include a fonts subfolder in your assets folder. If you are adding subfolders, ensure you update the path in your code.

If you are using the Kilimanjaro release of SuiteCommerce or SuiteCommerce Advanced or earlier, create a fonts folder in a module's folder and store your font file there. For example, Modules/Fonts.
Reference the path to your font file path. How you reference the path depends on your implementation. If you are hosting your font remotely, see Hosting a Font Remotely.

If you are using the Aconcagua release of SuiteCommerce or SuiteCommerce Advanced or later, you should dynamically generate the URL using the available built-in helpers. Depending on whether you are referencing the assets folder of an extension or a theme, use getExtensionAssetPath() or getThemeAssetPath().

Note:
The built-in helpers are also available to use within your template files and getExtensionAssetsPath() is also available in your extension's JavaScript files. You can use them to reference other non-font asset files like services, images, and library JavaScript files.

Assuming you are referencing the assets folder of a theme, your code will look similar to this:
```
                @font-face {
    font-family: "My New Cool Font";
    src: url(getThemeAssetsPath("My-New-Cool-Font.woff");
} 

              
```
If you are using the Kilimanjaro release of SuiteCommerce or SuiteCommerce Advanced or earlier, use standard syntax to refer to the path relatively. Assuming the font you are using is in a fonts subfolder in the Sass file you are currently editing, you would reference the file as follows:
```
                @font-face {
    font-family: "My New Cool Font";
    src: url("../Fonts/My-New-Cool-Font.woff");
} 

              
```
If you need to reference a font file in another module, use more instances of ../.
```
                @font-face {
    font-family: "My New Cool Font";
    src: url("../../MyOtherModule/Fonts/My-New-Cool-Font.woff");
} 

              
```
Update the module’s ns.package.json file to include the fonts folder.
```
                {
    "gulp": {
        "fonts": [
            "Fonts/*"
        ],
        "sass": [
            "Sass/*.scss"
        ]
    }
} 

              
```
Note:
Depending on how your code is organized, you may want to have a module to load your custom font. You must update the distro.json file to include a reference to the module in the modules object, and a reference to it in the relevant applications' CSS dependencies .
View your changes.

If you are running a local server, you can view your changes by reloading your website. See Test SCA Customizations on a Local Server for more information.

If you are viewing your site in NetSuite, you can deploy your changes using the developer tools. See Deploy SCA Customizations to NetSuite for more information.

Hosting a Font Remotely

A common way of serving font files is from a third-party CDN that specializes in serving font files. If you are using a third-party server or service to deliver your web font, you need to use the @font-face rule in your Sass file, specifying the URL for the font file to the remote server.

          @font-face {
    font-family: "My New Cool Font"; 
    src: url("https://www.mycoolwebserver.com/My-New-Cool-Font.woff");
}

However, depending on the type of third-party server or service you are using, you may not be able to link directly to your desired fonts. If this is the case, you can use @import to fetch stylesheets from the remote server or service.

          @import url("//fonts.thirdpartyserver.com/css?family=My+New+Cool+Font");

Best Practices for Adding a Custom Web Font

To add a custom web font:

Hosting a Font Remotely

Related Topics