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.
Whether using the admin’s CMS or your Store Theme CSS files, Store Framework gives you the flexibility to customize your store’s typography according to your business needs.
If you want to perform your store's typography customization in the Admin's CMS, refer to Customizing your store’s typography documentation in the Help Center.
Before you begin
Bear in mind that for the customization to work, the Styles builder of your store must be 2. x. To successfully migrate to Styles Builder 2.x, you must update the version of the styles
builder in the manifest.json
file of your Store Theme app, as the example below:
builders{
...
"styles": "2.x"
}
In the following, check the best practices of CSS handles to review and update every CSS customization for your store elements.
Step by step
Using Store Theme CSS files
- Open your Store Theme directory using a code editor of your preference.
- Create a new folder inside the
assets
directory calledfonts
. Make sure your app have the assets builder in its manifest. - Add the font files inside this folder (
assets/fonts/
).
The font files must be in the following file extensions:
.ttf
or.woff
.
- In
styles/configs
folder, create a new file calledfont-faces.css
. - Use the
@font-face
rule declaring the CSS properties you desire to apply in your website typography. For example:
@font-face {
font-family: 'MyHelvetica';
src: url(assets/fonts/MyHelvetica.woff2), url(assets/fonts/MyHelvetica.ttf);
font-weight: bold;
}
Notice that fonts uploaded on Assets builder can be referenced in your CSS files by declaring the desired file path in the
src
property.
The
font-faces.css
is a global file meaning its configurations are applied to all texts from the website. If you want to customize a component's typography independently, overriding the global configurations,you should declare thefont-faces.css
file still and refer the desired component font using thefont-family
property in the app's CSS overriding file.