Changing the Font in Shopify Product Descriptions and Titles

Your product pages are the single most important part of your Shopify store — after all, this is where visitors will evaluate your product offerings and determine whether they’re worth purchasing.

So, you should spend as much time as it takes to perfect the product page elements that visitors most often interact with, such as product photography, customer reviews, and the call-to-action button.

And beyond these essential elements, your product pages are so important that even the smallest details are worth paying attention to. 

For example, you may want to consider changing the font that’s used for your product titles and descriptions. 

A different font may better reflect the visual style that you’ve already established for your brand, providing visitors with a more cohesive shopping experience. Also, addressing the little details like this will help separate you from the competition, and it gives visitors the impression that you don’t cut corners in any area of your business. Overall, it’s just a good move for your brand value.

In this guide, we’ll walk you through two methods that you can use to add custom fonts to your Shopify product pages:

• Edit the Font of Product Descriptions and Titles with Code Changes
• How to Edit the Font in Descriptions and Titles using Shogun

Edit the Font of Product Descriptions and Titles With Code Changes

You might be able to make all the edits you want to your font directly through the Shopify admin  — in that case, there’ll be no need to mess with any code. 

Indeed, Shopify’s font library gives you a strong selection to choose from, and Shopify themes usually offer options for customizing your font size and color as well. 

But these default customization options can be somewhat limited. You may run into issues such as: 

• You can’t get the font size precisely where you want it — the closest options on the slider tool for font size make it either too big or too small for your specific needs.
• There’s no way to use different colors for your product title font and your product description font.
• The font you want to use is not available in Shopify’s font library. 

Situations such as these may require you to make some edits to your theme code. But don’t worry, no web development experience is necessary to pull any of this off. Below, we’ll show you exactly what it takes to custom-code solutions for adjusting font size, adjusting font color, and adding a new font.

Customizing the Font Size with Code Changes

As mentioned above, Shopify themes usually offer a slider tool for adjusting font size. For example, Shopify’s default Dawn theme has a setting called “Font size scale”, which allows you to increase the font size from a minimum of 100% to a maximum of 150% in increments of 5% — that means you have up to 11 different options for your font size, which can be set separately for your headings and body text.

If you’re not happy with any of these options, you can customize the font size with code instead:

• Log in to your Shopify account and select the sales channel you want to customize in the left sidebar of the main Shopify control panel.
• Open the “…” dropdown menu next to the theme you’re currently using, then select “Edit code”.
• Go to the “Assets” folder and open the “base.css” file. 

At the bottom of this file, insert the following code if you want to change the size of your Shopify product title font:

.product__title h1 {
    font-size: 24px;
}

To change the size of your Shopify product description font, insert the following code:

body { 
    font-size: 20px; 
}

If necessary, replace the “24px”/”20px” part of this code with whatever font size you would like to use. 

After you save this update to the “base.css” file, your code changes will override the “Font size scale” settings and be reflected in both Shopify’s built-in theme editor and the live version of your site.

Customizing the Font Color with Code Changes

Want to use separate font colors for your product titles and product descriptions? This can also be done with some minor tweaks to your theme code.

The process is quite similar to customizing your font size with code changes. To change the color of your Shopify product title font, go to your theme files, open “base.css”, and add the following code:

.product__title h1 {
    color: #800020
}

To change the color of your Shopify product description font, use this code:

body { 
    color: #FF0000
}

Just replace “#800020”/”#FF0000” with the specific hex codes of the colors you want to use, and then you’re good to go.

Again, after you save the update to your “base.css” file, you’ll be able to see your code changes reflected in both Shopify’s built-in theme editor and the live version of your site.

Adding a New Font with Code Changes

To add a new font that only applies to your product titles or descriptions, you’ll need to custom-code a new type of section for Shopify’s built-in theme editor.

But before all that, you must decide on which font you would like to add. Resources such as Google Fonts and Adobe Fonts give you thousands of free options to choose from.

Once you’ve made your choice, you’ll then need to download the font file. For example, let’s say you want to add the Barriecito font from Google Fonts. In that case, you would need to:

• Go to Google Fonts.
• Search for and select “Barriecito”.
• Click on the “Download All” button.

Unzip the downloaded folder to access the “Barriecito-Regular.ttf” file. Next, you need to upload this file to Shopify:

• Select the “Content” option in the left sidebar of the main Shopify control panel.
• Select “Files”. 
• Drag “Barriecito-Regular.ttf” from your computer files into the upload area.

Now it’s time to add some code:

• Go to your theme files.
• Open the “Sections” folder. 
• Select “Add a new section”.
• In the new section settings, select “Liquid”, name it “custom-font”, and then select “Done”. 

In this new section, add the following code: 

{% if section.settings.enable %}
  <style data-custom-fonts>
       {% assign items = section.blocks | reverse  %}

         {% for block in items %}
         {% assign name = block.settings.name %}
         {% assign url = block.settings.custom_font_url  %}
         {% assign custom_font_weight = block.settings.custom_font_weight %}
         {% assign customFontStyle = block.settings.custom_font_style %}
         {% assign apply_h1 = block.settings.apply_h1 %}
         {% assign apply_h2 = block.settings.apply_h2 %}
         {% assign apply_h3 = block.settings.apply_h3 %}
         {% assign apply_h4 = block.settings.apply_h4 %}
         {% assign apply_h5 = block.settings.apply_h5 %}
         {% assign apply_h6 = block.settings.apply_h6 %}
         {% assign apply_span = block.settings.apply_span %}
         {% assign apply_p = block.settings.apply_p %}
         {% assign apply_custom = block.settings.apply_custom %}
         {% assign apply_a = block.settings.apply_a %}
         {% assign apply_input = block.settings.apply_input %}
      {% assign apply_label = block.settings.apply_label %}
      {% assign apply_legend = block.settings.apply_legend %}
      {% assign apply_button = block.settings.apply_button %}
      {% assign apply_summary = block.settings.apply_summary %}
      {% assign apply_select = block.settings.apply_select %}
      {% assign apply_option = block.settings.apply_option %}
      {% assign apply_small = block.settings.apply_small %}


         {% if url != blank and url != "" %}

           {% capture _font_type %}
           {% if url contains ".otf" %}
           opentype
           {% elsif url contains ".ttf" %}
           truetype
           {% elsif url contains ".svg" %}
           svg
           {% elsif url contains ".woff2" %}
           woff2
           {% else %}
           woff
           {% endif %}
           {% endcapture %}

           {% assign font_type = _font_type | strip %}
             @font-face {
               font-family: '{{ name }}';
               src: url({{ url }}) format('{{ font_type }}');

                 {% if customFontStyle != 'none' %}
               font-style: {{ customFontStyle }};
                 {% endif %}
               {% if custom_font_weight != 'none' %}
               font-weight: {{ customFontStyle }};
                 {% endif %}
             }


             {% if apply_h1 %}
               h1{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

             {% if apply_h2 %}
               h2{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}


             {% if apply_h3 %}
               h3{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

             {% if apply_h4 %}
               h4{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

             {% if apply_h5 %}
               h5{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

             {% if apply_h6 %}
               h6{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

             {% if apply_p %}
               p{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

       {% if apply_a %}
               a{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

    {% if apply_input %}
               input{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

    {% if apply_label %}
               label{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

                 {% if apply_legend %}
               legend{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

     {% if apply_button %}
               button{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

    {% if apply_summary %}
               summary{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

    {% if apply_select %}
               select{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

     {% if apply_option %}
               option{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

    {% if apply_small %}
               small{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

             {% if apply_span %}
               span{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}

             {% if apply_custom != "" and apply_custom != blank %}
               {{ apply_custom }}{
                 font-family: '{{name}}' !important;
                 font-weight: {{custom_font_weight}} !important;
               }
             {% endif %}
         {% endif %}
         {% endfor %}
  </style>
{% endif %}



{% schema %}
{
  "name": "Custom Font",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable",
      "label": "Enable",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Font",
      "settings": [
        {
          "type": "text",
          "id": "name",
          "label": "Font name",
          "default": "customfont"
        },
        {
          "type": "select",
          "id": "custom_font_weight",
          "label": "Font weight",
          "default": "none",
          "options": [
            {
              "value": "none",
              "label": "None"
            },
            {
              "value": "normal",
              "label": "Normal"
            },
            {
              "value": "bold",
              "label": "Bold"
            }
          ]
        },
        {
          "type": "text",
          "id": "custom_font_url",
          "label": "Font URL"
        },
        {
          "type": "paragraph",
          "content": "Apply the custom font to the following HTML elements:"
        },
        {
          "type": "checkbox",
          "id": "apply_h1",
          "label": "H1",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_h2",
          "label": "H2",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_h3",
          "label": "H3",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_h4",
          "label": "H4",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_h5",
          "label": "H5",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_h6",
          "label": "H6",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_span",
          "label": "<span> tags",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_p",
          "label": "<p> tags",
          "default": true
        },
         {
          "type": "checkbox",
          "id": "apply_a",
          "label": "<a> tags",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_input",
          "label": "<input> tags",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_label",
          "label": "<label> tags",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_legend",
          "label": "<legend> tags",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_button",
          "label": "<button> tags",
          "default": true
        },
         {
          "type": "checkbox",
          "id": "apply_summary",
          "label": "<summary> tags",
          "default": true
        },
         {
          "type": "checkbox",
          "id": "apply_select",
          "label": "<select> tags",
          "default": true
        },
         {
          "type": "checkbox",
          "id": "apply_option",
          "label": "<option> tags",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_small",
          "label": "<small> tags",
          "default": true
        },
        {
          "type": "textarea",
          "id": "apply_custom",
          "label": "CSS Selectors",
          "info": "Apply font to custom CSS selectors"
        }
      ]
    }
  ]
}
{% endschema %}

Once you’re done, save your changes.

There’s one more piece of code you need to add. Open your “theme.liquid” file and insert the following line just below the <body> tag:

{% section 'custom-font' %}

Once more, save your changes.

Finally, you can access this new section and apply your custom font through Shopify’s built-in theme editor:

• Select the sales channel you would like to customize in the left sidebar of the main Shopify control panel. 
• Click on the “Customize” button next to the theme you’re currently using — this will open up Shopify’s built-in theme editor. 
• Use the dropdown menu located at the top of the page to navigate to the template you’re currently using for your product pages (in most cases, this will be the “Default product” template).
• In the left sidebar of Shopify’s built-in theme editor, you’ll now see a new section called “Custom Font” — click on it to expand the settings.
• Select “Add font”, then select “Font”.
• Add the name of your font as well as the URL that was created when you uploaded the font file to your Shopify account (it should start with “https://cdn.shopify.com/”). After you have done so, you can then select which types of text the font will be applied to (in this case, the product titles are “H1” text, while the product descriptions are “<p>” text).

How to Edit the Font in Descriptions and Titles using Shogun

Shogun makes it particularly easy to add and edit fonts on your Shopify store. 

First, you’ll need to import the Shopify pages you want to customize into Shogun:

• After downloading and installing Shogun, select the “Apps” option in the left sidebar of the main Shopify control panel.
• Open Shogun. 
• Go to the “Pages” section of the Shogun app.
• Hover your cursor over the “Build or edit a page” option, then select “Import a page”.
• Click on the “Import page” button next to the page you want to import. 
• Choose whichever layout option you prefer, then select “Import”.

Pages that have been imported from Shopify can be customized with Shogun’s visual editor:

• Go to the “Pages” section of the Shogun app. In the “Shogun” tab, you’ll find all of the pages that have already been imported. Select the page you want to customize — this will open the visual editor. 
• Click on a piece of text, such as your product description, to open its customization settings in the right sidebar of the visual editor. 
• In the customization settings, open the “Text Styling” dropdown menu and switch from “Theme Style” to “Custom Style”.

This will give you complete control over how your font looks. All 1,800 of the font families offered by Google Fonts come included with Shogun. You can also change the size and color of any letter on the page to whatever you want with just a couple clicks. And there are a variety of other customization options, including highlight color, letter spacing, and even animation effects, available as well. 

Whether it’s your font or any other aspect of your Shopify storefront, Shogun gives you all the tools you need to get every detail right.