Benefits of using different types of fonts in your Shopify store.
Stand out from competitors: Choose fonts that match your brand's personality and values to make your store unique.
Better user experience: Pick fonts that are attractive and easy to read, so visitors enjoy browsing and stay longer, which can lead to more sales.
Consistent branding: Use the same fonts across all your digital platforms to keep a uniform look, helping people recognize your brand easily.
How to implement this setting in your shopify store
Code Implementation Details
To implement this font setting in your Shopify store,Here’s a step-by-step guide to set it up:
1. Customize your shopify theme code
- Go to Online Store > Themes > Actions > Edit Code.
- First you go to your config/settings_schema.json file
- Now paste the given schema code as shown in image.
{
"name": "Font Settings",
"settings": [
{
"type": "select",
"id": "font_selection",
"label": "Select Font",
"options": [
{ "value": "Arial", "label": "Arial" },
{ "value": "RubadyGamePersonal", "label": "RubadyGamePersonal" },
{ "value": "CedarvilleCursive", "label": "Cedarville Cursive" },
{ "value": "HappyBeige", "label": "Happy Beige" }
],
"default": "Arial"
}
]
},
- Now go to your shopify content > files .
- Upload your fonts file.
- Now go to your theme.liquid file
- And paste the given code as shown in images.
<style><!--
body {
font-family: {{ settings.font_selection | escape }} !important; /* Use the selected font */
}
h1, h2, h3, p, a {
font-family: {{ settings.font_selection | escape }} !important;
}
@font-face {
font-family: 'CedarvilleCursive';
src: url('{{ "https://cdn.shopify.com/s/files/1/0652/5124/6336/files/CedarvilleCursive-Regular.woff?v=1728559136" }}') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Happy Beige';
src: url('{{ "https://cdn.shopify.com/s/files/1/0652/5124/6336/files/Happy_Beige.woff?v=1728559136" }}') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'RubadyGamePersonal';
src: url('{{ "https://cdn.shopify.com/s/files/1/0652/5124/6336/files/RubadyGamePersonal.woff?v=1728559093" }}') format('woff');
font-weight: normal;
font-style: normal;
}
--></style>