How to change custom font on Shopify store

December 4, 2024

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"

        }

    ]

},

After applying the given code .

You will see the dropdown font setting in your store theme settings.

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>

In this code there is a src option in which you have to upload your file link and also update the font name .

Save the changes

Now go to customization and select the font.

Now see the changes.