Hosting a Font Remotely

Hosting a Font Remotely

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.

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

• 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:

1. 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.

2. 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:

   javascriptCopy

   @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:

   javascriptCopy

   @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 ../.

   javascriptCopy

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

   Update the modul