Ever looked at your Shopify store and felt like something was just… missing? Maybe the layout is great, your product photos are on point, but the font—well, it just doesn’t reflect your brand’s personality. The good news? You don’t have to settle for Shopify’s default fonts.
Adding a custom font on Shopify is one of the simplest ways to instantly level up your store’s look and feel. Whether you’re building a minimal, modern brand or a bold, expressive storefront, the right typography can make all the difference.
In this blog post, I’ll show you how to add a custom font on Shopify, step by step. No complicated coding knowledge needed—just a few tweaks and you’ll have your own unique font style running across your site. So if you’ve been wondering how to change the font in Shopify or make your site stand out with custom typography, you’re in the right place.
1. Download the Font
First, download the custom font you’d like to use. While you can use various font formats like .ttf, .otf, or .eot, it’s recommended to use web-optimized formats such as .woff or .woff2 for better performance and broader browser compatibility.
2. Upload the Font to Shopify
- From your Shopify admin, go to Content > Files.
- Click Upload files, and choose your font file to upload.
3. Access Your Theme Code
- Head over to Online Store > Themes.
- Click Actions > Edit code.
4. Create a Custom Section
In the Sections folder, click Add a new section and name it custom-font.liquid. (Copy the code below)
5: Locate the <body tag in your theme.liquid
Paste the following line of code right after it.
{% section 'custom-font' %}
Need Help?
Struggling to upload your custom fonts or not seeing the changes reflect on your site? Don’t worry — we’re here to help!
Whether you need assistance uploading font files, editing your theme’s code, or choosing the right typography for your brand, our Shopify experts are just a message away. Contact Us
Contact Us Today
Let us handle the technical part while you focus on growing your business.
{% 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 weight = block.settings.custom_font_weight %}
{% assign style = block.settings.custom_font_style %}
{% assign selectors = "" | split: "" %}
{% if url != blank %}
{% 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 %}
@font-face {
font-family: '{{ name }}';
src: url('{{ url }}') format('{{ font_type | strip }}');
{% if style != 'none' %}
font-style: {{ style }};
{% endif %}
{% if weight != 'none' %}
font-weight: {{ weight }};
{% endif %}
}
{% assign selector_map =
"apply_h1:h1,apply_h2:h2,apply_h3:h3,apply_h4:h4,apply_h5:h5,apply_h6:h6,
apply_span:span,apply_p:p,apply_a:a,apply_input:input,apply_label:label,
apply_legend:legend,apply_button:button,apply_summary:summary,
apply_select:select,apply_option:option,apply_small:small" | split: "," %}
{% for pair in selector_map %}
{% assign parts = pair | split: ":" %}
{% assign setting = block.settings[parts[0]] %}
{% if setting %}
{{ parts[1] }} {
font-family: '{{ name }}' !important;
{% if weight != 'none' %} font-weight: {{ weight }} !important; {% endif %}
}
{% endif %}
{% endfor %}
{% if block.settings.apply_custom != blank %}
{{ block.settings.apply_custom }} {
font-family: '{{ name }}' !important;
{% if weight != 'none' %} font-weight: {{ weight }} !important; {% endif %}
}
{% endif %}
{% endif %}
{% endfor %}
</style>
{% endif %}
{% schema %}
{
"name": "Custom Font",
"settings": [
{
"type": "header",
"content": "codeniden.com"
},
{
"type": "checkbox",
"id": "enable",
"label": "Enable",
"default": true
}
],
"blocks": [
{
"type": "image",
"name": "Font",
"settings": [
{
"type": "header",
"content": "codeniden.com"
},
{
"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 %}