How To Add A Custom Font To Any Shopify Theme

Hi! Are you searching on how to add a custom font to shopify theme or store then your search just ends there. This today blog consists steps by using you do not need to go back to the theme code editor to change font family all the times. The simple code I will mention in below steps will solve your all confusions related to adding a desired font to shopify store.

Follow below instructions

1. Go to the shopify dashboard area and then click on “online store”.
2. Then you have to click on “Themes” and you will find 3 dots of published theme click on these dots and then click on “Edit Code”.
3. Inside code editor find “Sections” then create a section with the name of “custom-font” and replace below code with that section code.

{% if section.settings.enable_custom-font %}
<style>
    @font-face {
  font-family: '{{section.settings.name-font}}';
  src: url({{ section.settings.custom-font }}) format('woff2');

}

h1, h2, h3, h4, h5, h6,p,a,span,body,ul,li,small,div{
font-family: '{{section.settings.name-font}}' !important;

}
</style>
      {% endif %}
{% schema %}
  {
    "name": "Custom Font",
    "settings": [
      {
        "type":"checkbox",
        "id":"enable_custom-font",
        "label":"Enable Custom Font Link",
        "default":false
      },
      {
        "type":"text",
        "id":"custom-font",
        "label":"Add Custom Font Link",
        "info":"Upload font file in woff2 format in shopify files"
      },
      {
        "type":"text",
        "id":"name-font",
        "label":"Custom Font Name"
      }
    ]
  }
{% endschema %}

4. Then open “theme.liquid” file and before </head> tag put this code “{% section ‘custom-font’ %}” and save theme file. Close code editor.

5. Now click on “Customize” button and then you will find “Custom Font” section at the very top upload your font into Woff2 format and put link and name of font there and that is it.