Step 1: Adding the font files to your store
1 – From your Shopify admin, navigate to Content > Files > Upload Files
2 – Web Font files are the ones that have the following extensions: .ttf, .woff,.woff2, or .otf.
Step 2: Adding the code to read the font
1 – In your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code.
2 – Under sections, click on “Add a new section” and create a section named: websensepro-custom-font
3 – Paste the following code and save:
{% 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": "header",
"content": "Subscribte to [WebSensePro for Free Tutorials](https://www.youtube.com/c/websensepro?sub_confirmation=1)"
},
{
"type": "checkbox",
"id": "enable",
"label": "Enable",
"default": true
}
],
"blocks": [
{
"type": "image",
"name": "Font",
"settings": [
{
"type": "header",
"content": "Subscribte to [WebSensePro for Free Tutorials](https://www.youtube.com/c/websensepro?sub_confirmation=1)"
},
{
"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 %}4 – Now, open the file named theme.liquid. Make sure it reads exactly “theme.liquid”.
5 – Paste the following code right below the <body> tag:{% section 'websensepro-custom-font' %}
Step 3: Using the custom font on your website
1 – On the top left, click on the 3 dots and “customize theme”.
2 – On the sidebar located on the left side, you will find a new section called “Custom Font”.
Click on the arrow on the left to expand it, and then click on “Add font”.
3 – Under “Font name”, make sure you add a font name.
Under “Font URL”, add the URL for the file that was added back in Step 2.
Extra: adding the custom font only to specific elements
If you’d like to use your custom font only for specific elements, you can use the “CSS Selectors” and add your selector there at the very bottom at “CSS Selectors”
Conclusion
Remember that you can also fully disable the Custom font at any time by simply clicking on “Custom Font” > uncheck “Enable”.
