Best Practices for Adding Custom Web Fonts in SuiteCommerce

When customizing your Commerce website, incorporating a custom web font can help align with corporate branding or enhance visual appeal. The optimal method for implementing a web font is through the @font-face rule, which allows you to define new font families along with specifications for various font types, weights, and styles. Once defined, the custom font can be utilized throughout your site’s styles.

Using @font-face Rule

The following example illustrates how to declare a new font family, locate the font, and apply it to your site's primary text:

1@font-face {
2    font-family: "My New Cool Font";
3    src: url("path/to/My-New-Cool-Font.woff");
4}
5body {
6    font-family: "My New Cool Font";
7}

Best Practices for Adding a Custom Web Font

• Font Ownership and Licensing: Ensure that you own the font or have the appropriate licensing for its use. Be aware of any restrictions that may apply, especially for free fonts.
• Performance Impact: Adding custom web fonts will slightly affect site performance, necessitating additional HTTP requests. While the impact is usually minimal, always consider the trade-off between aesthetics and site speed.
• Hosting Options: You can host your font files either locally within your source code or remotely. Hosting them in your assets folder provides better control versus using a third-party font delivery service.
• Loading Fonts Synchronously: The @font-face rule loads synchronously, which can block text rendering if a font takes too long to load. For performance concerns, you may opt to load fonts asynchronously using JavaScript.

Steps to Add a Custom Web Font

1. Store Your Custom Web Font: Depending on your SuiteCommerce implementation:

   • For Aconcagua release or later, keep your font file in your theme's assets folder. Suggested organization includes a fonts subfolder, ensuring all paths in your code are correctly updated.
   • For Kilimanjaro or earlier releases, create a fonts folder within a module's directory (e.g., Modules/Fonts).

2. Reference the Font File Path: The method of reference varies by implementation:

   • For Aconcagua or later, generate the URL using built-in helpers. For example:
     javascriptCopy

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

   • For Kilimanjaro or earlier, use relative paths:
     javascriptCopy

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

     To reference fonts in separate modules, apply additional ../ as needed.

3. View Your Changes: To see the font in action, reload your website on a local server or deploy changes through the developer tools in NetSuite.

Hosting a Font Remotely

When using a CDN or a third-party service to deliver your custom font, specify the remote URL in the @font-face rule:

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

If direct linking isn't possible, use @import to include styles from the remote source:

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

Key Takeaways

• Ensure compliance with font ownership and licensing before use.
• Balance aesthetic needs with the performance impact of loading custom fonts.
• Utilize the @font-face rule effectively to integrate custom fonts.
• Host fonts locally or remotely based on your implementation requirements.
• Test and verify font integration using local servers or direct deployments.

Source: This article is based on Oracle's official NetSuite documentation.