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

Chinese font
English 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

{                  "value": "code 2 ,code3 ",                  "label": "code 2",                  "group": "code 3"                },

For font Concert One example:

{                  "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



⚠️ Kindly take note : Above all code editing, you will need to re-edit the code again if you switch to a new theme template

Additional GIF for extra reference:

Updated on: 25/03/2024