Add additional fonts for online store
In this article:
- Introduction
- Add font into EasyStore
⚠️ Kindly take note :
- Above all code editing, you will need to re-edit the code again if you switch to a new theme template
- We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons
1. Introduction
Fonts are enormously powerful in setting the tone and personality for a brand. With thousands of fonts to choose from today, some organisations go the extent of spending thousands on creating a bespoke font, unique to them, in order to stand out from the crowd. This is something I often look at when creating a logo, to establish a more unique or quirky personality for the name" said Matt, creative director from MAXX.
2. Add font into EasyStore
- Find preferable font resources, example: Google font
- Click on + to add new font into list (green circle). Take font - Concert One as example.
- Click on the pop-up bar at the bottom.
- For better explanation, divide three code into 1,2,3.
- EasyStore Admin > Themes > Edit Source > layout > layout/theme.liquid > insert code 1 after "line 16" > Save
- Assign your code 2, and code 3 to below template
undefined { "value": "code 2 ,code3 ", "label": "code 2", "group": "code 3" },
For font Concert One example:
undefined { "value": "'Concert One',cursive", "label": "'Concert One'", "group": "cursive" },
- Go to config/settings_schema.json to add the font type for [Body text]
Locate "id": "body_font_family", copy the template with code and paste it into the row after "options": [ (probably is after line 18)
- Go to config/settings_schema.json to add the font type for [Heading text]
Locate "id": "heading_font_family", copy the template with code and paste it into the row after "options": [ (probably is after line 140)
- Save
- EasyStore Admin > Channels > Online Store > Customize > General > body text : Concert One> Save
Additional GIF for extra reference:
Updated on: 25/03/2024
Thank you!