Customizing your store’s typography

Introduction

In addition to being crucial for communicating with users, a store’s typography should be a reflection of its identity, using its characteristic styles, such as font size and spacing.

Using admin’s Storefront, you can customize a store’s typography faster and easier, without the need to resort to your theme’s code for direct CSS changes.

Step by step

  1. Access Storefront in the desired account’s admin, in CMS.
  2. Click on Design, in the upper part of the page.
    customize-typo-image1 EN
  3. In Styles, select the More Options (three dots) menu for the store’s style whose typography will be edited.
    customize-typo-image2 EN
  4. Click on Edit and select Typography.
    customize-typo-image3 EN

In the Font Family section, you can add a font family of your choosing in order to use in your store’s theme. Simply click on Add custom font and upload the desired font’s file.

After choosing the font family, you can apply it to your store’s text content. The Type Token option displays all your store’s text content that can be customized. In addition to each one’s font families, you can also customize other parameters, such as Font Weight, Font Size, capitalization (Text Transform) and spacing (Letter Spacing).

For a better understanding of this feature and customization recommendations for each of your store’s text content, access the VTEX Styleguide.

After performing the desired customizations, don’t forget to save the changes.
Edit this page on GitHub