How to change custom font on Shopify store

How to change custom font on Shopify store

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.
    • Back to blog

      Leave a comment

      Please note, comments need to be approved before they are published.

      null