Effectively communicating with users requires careful consideration of your store's typography. It serves as a visual representation of your store's identity through distinctive styles, encompassing factors like font size and spacing.

For additional information on customizing your store’s typography using the CMS, refer to the Customizing your store’s typography guide.

Before following this guide, ensure that you:

• Review the Best practices for using CSS handles article.
• Set up the Assets builder in your Store Theme app's manifest.json file.
• Set up the Styles builder to version 2.x in your Store Theme app's manifest.json file. Note that previous versions of the Styles builder do not support the customization outlined in this guide.

1. Open your Store Theme app in your preferred code editor.
2. Create a new folder named fonts within the assets directory.
3. Place the font files inside the assets/fonts/ folder. Ensure font files have the extensions: .ttf or .woff.
4. In the styles/configs folder, create a new file named font-faces.css.
5. Use the @font-face rule to declare the desired CSS properties for your website's typography. For example:

Fonts uploaded on the Assets Builder can be referenced in your CSS files by specifying their file path in the src property.

The font-faces.css file is a global configuration. Utilize the declared font faces using the font-family property to specify the desired font for a particular component. Here's an example: