1. Download font which you want to apply.
2. Go to Content -> Files -> Upload files
3. Go to themes -> Edit code -> Sections
4. Create new section and name it ‘custom-font’ and paste below 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": "header",
"content": "Subscribte to [Free Tutorials](https://www.youtube.com/amazinglearning?sub_confirmation=1)"
},
{
"type": "checkbox",
"id": "enable",
"label": "Enable",
"default": true
}
],
"blocks": [
{
"type": "image",
"name": "Font",
"settings": [
{
"type": "header",
"content": "Subscribte to [Free Tutorials](https://www.youtube.com/@amazinglearning?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 %}5. include the section in the body tag. Find <body and paste below line:
{% section 'custom-font' %}