تغییر فونت در قالب زایرا

این راهنمایی به شما کمک خواهد نمود که فونت دلخواه و مورد نظر خود را در قالب گنجانده و بر روی ساختار و متون قالب زایرا اعمال نمائید. این کار به زیبایی و خوانایی بهتر وب‌سایت شما کمک شایانی خواهد کرد.

ادغام فونت از طریق آدرس آن

در صورتی که می‌خواهید فونت موردنظر و دلخواه خود را از طریق آدرس آن بر روی قالب سوار کنید بایستی آدرسی که در دست دارید را در قسمت فونت استایل در فایل style.css در مسیر assets/css/style.css قرار دهید. در ادامه نمونه کدی را مشاهده خواهید نمود که به شما مسیر درست قرار دادن آدرس فونت را نشان می‌دهد. بجای آدرس داخل تابع url آدرس فونت دلخواه خود را قرار دهید:

/*=============================
1. Google Fonts
===============================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap');

ادغام فونت از طریق فایل دانلود شده

در صورتی که فایل فونت موردنظر خود را دانلود کرده و در اختیار دارید آن را باید در مسیر مناسب قرار داده و در بین کدهای استایل فراخوانی نمائید. فونت وزیر متن به عنوان مثال از همین طریق نصب گشته است. به فولدر assets در داخل محتویات قالب رفته و فایل‌های فونت خود را در پوشه fonts آنجا قرار دهید. در صورتی که فونت دانلودی شما خود دارای فایل استایل می‌باشد آن را در داخل پوشه css قرار دهید و در داخل فایل استایل خود آدرس فونت‌ها را بروز نمائید. از طریق @import می‌توان فایل استایل فونت را فراخوانی کرد. به عنوان مثال اگر فونت مورد نظر خود را در آدرس css/elfont.css داشته باشیم بایستی با استفاده از دستور مذکور به این صورت @import "elfont.css آن را فراخوانی کنیم. مسیردهی برای فراخوانی فایل باید از جایی باشد که فایل style.css قرار دارد.

/*=============================
1. My Fonts
===============================*/
@import "elfont.css";

در صورتی که فونت دانلود شده شما دارای فایل استایل نمی‌باشد بایستی با استفاده از دستور @font-face استایل موردنظر را ساخته و به روش بالا در قالب ادغام نمود. بدین منظور در داخل پوشه css یک فایل به اسم فونت خود بسازید سپس کدهای زیر را داخل آن قرار دهید:

@font-face {
    font-family: "my-font";
    src: url("../fonts/my-font.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

پس از وارد ساختن همه وزن‌ها و فایل‌های فونت‌ها به روش بالا فایل استایل فونت خود را در داخل فایل style.css وارد نمائید.

اعمال فونت در متن و ساختار قالب

پس از ادغام فونت خود به یکی از روش‌های بالا اکنون زمان اعمال فونت خود در متن قالب می‌باشد. بدین منظور فایل style.css از داخل فولدر css بایستی ویرایش گردد. در بخش متغییرها دو متغییر اول برای تنظیمات فونت در نظر گرفته شده‌اند کافی است مقدار آنها را به اسم فونت خود تغییر دهید تا فونت در تمام قالب اعمال گردد.

/*=============================
01. Variable CSS
===============================*/
:root {
    --tg-body-font-family: 'Vazirmatn', sans-serif;
    --tg-heading-font-family: 'Vazirmatn', sans-serif;
    ...
}

برای اعمال فونت بر روی متن بدنه نام فونت خود را بجای Vazirmatn در متغییر اول جایگزین نمائید. برای اعمال فونت بر روی سرصفحه‌ها نام فونت خود را بجای Vazirmatn در متغییر دوم جایگزین نمائید.

در صورتی که تغییرات بدرستی انجام شده باشند پس از بارگذاری مجدد صفحات خود باید متون وب‌سایت خود را با فونت جدید مشاهده نمائید.