I’m using the Dawn theme, and I’ve added a custom font using custom code from a YouTube tutorial. It was working fine, and when viewed on an Android device, it looked great. Here’s the reference.
Look at the heading font - it was fine on Android. Here’s the same website viewed on iOS; every browser displays it like this
How to rectify this, please help with me, it was an urgent
Website Link: https://2512in.myshopify.com/password
Password: 2512
Thanks in advance
Please share the custom code you added to add your custom font.
Thanks for the reply @Dan-From-Ryviu , here’s the code.
{% if section.settings.enable %}
{% endif %}
{% schema %}
{
"name": "Jahin Custom Font",
"settings": [
{
"type": "header",
"content": "Made by (https://www.crotemplateslibrary.com/)"
},
{
"type": "paragraph",
"content": "Replace apps with copy/paste code snippets like this one & save money. [Click here for more tutorials.](https://www.crotemplateslibrary.com/)"
},
{
"type": "checkbox",
"id": "enable",
"label": "Enable",
"default": true
}
],
"blocks": [
{
"type": "image",
"name": "Font",
"settings": [
{
"type": "header",
"content": "Made by (https://www.crotemplateslibrary.com/)"
},
{
"type": "text",
"id": "name",
"label": "Custom font name",
"info": "Use only lower or upper characters from A-Z. No numbers, no special characters, no spaces.",
"default": "customfont"
},
{
"type": "select",
"id": "custom_font_weight",
"label": "Font weight",
"info": "If you're unsure, use \"none\".",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "normal",
"label": "Normal"
},
{
"value": "bold",
"label": "Bold"
},
{
"value": "100",
"label": "100"
},
{
"value": "200",
"label": "200"
},
{
"value": "300",
"label": "300"
},
{
"value": "400",
"label": "400"
},
{
"value": "500",
"label": "500"
},
{
"value": "600",
"label": "600"
},
{
"value": "700",
"label": "700"
},
{
"value": "800",
"label": "800"
}
]
},
{
"type": "select",
"id": "custom_font_style",
"label": "Font style",
"info": "If you're unsure, use \"none\".",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "normal",
"label": "Normal"
},
{
"value": "italic",
"label": "Italic"
}
]
},
{
"type": "text",
"id": "custom_font_url",
"label": "Custom font URL",
"info": "Add all URLs for this font here, one per line. Upload your fonts to the [files panel](/admin/settings/files)."
},
{
"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": " tags",
"info": "Apply this custom font to all HTML span elements.",
"default": true
},
{
"type": "checkbox",
"id": "apply_p",
"label": "
tags",
"info": "Apply this custom font to all HTML paragraph elements.",
"default": true
},
{
"type": "textarea",
"id": "apply_custom",
"label": "CSS Selectors",
"info": "Apply font to custom CSS selectors. Example: .custom-text,.wrapper > h1",
"placeholder": ".my-text"
}
]
}
]
}
{% endschema %}