শপিফাই থিম কাস্টমাইজ করার সময় আমরা প্রচুর font পাই থিমে ব্যবহার করার জন্য। কিন্তু এর বাইরেও আমাদের কিছু ফন্টের প্রয়োজন হয় যেগুলো শপিফাই স্টোরে থাকে না।
কিভাবে আমাদের দরকারি কোনো Custom Font সহজেই ইনস্টল করতে পারি সেটা এই আর্টিকেলে ধাপে ধাপে দেখানো হয়েছে।
ধাপ-১: Shopify store এ Font File Upload
ডাউনলোড করা ttf, woff, woff2 ইত্যাদি ফরম্যাটের ফন্ট ফাইল আপনার শপিফাই স্টোরের Admin Dashboard থেকে Content > Files>Upload Files বা Drag and Drop করে আপনার ফন্টগুলো আপলোড করুন।
ধাপ-২: কাস্টম ফন্টের জন্য কোড এড করুন
১. Admin Dashboard থেকে Online Store > Themes > Actions > Edit Code এ যান।
দরকারি আলাপ: কোড এডিট করার আগে Duplicate করে নিবেন। Edit করতে গিয়ে কোনো সমস্যা হলে আগের অবস্থায় সহজে ফিরে যেতে পারবেন।
২. section folder এর মধ্যে Add a new section এ ক্লিক করে নতুন একটা liquid file create করুন।
আমি file এর নাম দিলাম custom-fonts।
৩. default code গুলো মুছে দিয়ে নিচের কোডগুলো সেখানে paste করে 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": "Visit bdit.community to learn more"
},
{
"type": "checkbox",
"id": "enable",
"label": "Enable",
"default": true
}
],
"blocks": [
{
"type": "image",
"name": "Font",
"settings": [
{
"type": "header",
"content": "Visit bdit.community to learn more"
},
{
"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 %}
ধাপ-৩ theme.liquid file এ custom-fonts section টি include করুন
theme.liquid file open করে body এর একদম শুরু তে নিচের কোডটি লিখে save করুন।
{% section 'custom-fonts' %}
ধাপ-৩: website এ কাস্টম ফন্ট ব্যবহার করুন
১. উপরের বাম কর্ণারের ... এ ক্লিক করে Customize theme এ যান।
২. Section এর একদম উপরে Custom Font section দেখতে পাবেন।
Add Font এ ক্লিক করুন।
৩. Add Font এ ক্লিক করলে একটা Font section এড হবে। Font এ ক্লিক করুন।
৪. Font Name দিন এবং URL field এ Content এ আপলোড করা আপনার font file এর URL দিন।
আপনি কোন কোন Element এ এই ফন্টটি apply করতে চাচ্ছেন সেটাও নিচে toggle button এর মাধ্যমে বলে দিতে set করতে পারবেন।
৪. ঠিক একই ভাবে Add Font এ ক্লিক করে আরো ফন্ট এড করতে পারবেন।
শেষ কথা
কাস্টম ফন্ট খুব বেশি প্রয়োজন না হলে ব্যবহার না করাই ভালো। এতে ওয়েবাসাইট ভারী হতে পারে।
আপনি যদি add করা custom-fonts disable করতে চান, তাহলে Custom Font section এ ক্লিক করে তা করতে পারেন।
ধন্যবাদ।