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 you begin
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
- Set up the Styles builder to version
2.xin your Store Theme app's
manifest.jsonfile. Note that previous versions of the Styles builder do not support the customization outlined in this guide.
Step by step
- Open your Store Theme app in your preferred code editor.
- Create a new folder named
- Place the font files inside the
assets/fonts/folder. Ensure font files have the extensions:
- In the
styles/configsfolder, create a new file named
- Use the
@font-facerule 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
Using font faces
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: