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

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

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

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

@use "_vazirmatn.scss";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Urbanist:wght@300;400;500;600;700&display=swap');

فعال‌سازی فونت در پیکربندی تیلویند

پس از ادغام فونت خود به یکی از روش‌های بالا اکنون زمان فعال‌سازی فونت خود در پیکربندی تیلویند می‌باشد. بدین منظور فایل tailwind.config.ts داخل فولدر اصلی قالب بایستی ویرایش گردد. در پیکربندی تیلویند در آبجکت extend بدنبال fontFamily بگردید و در اینجا بمانند نمونه فونت موجود نام فونت خود را وارد سازید.

دقت نمائید که در سمت چپ نام فونت خود را با حروف کوچک لاتین و بدون خط فاصله قرار دهید.

theme: {
    ...
    extend: {
        fontFamily: {
            "vazirmatn": ["Vazirmatn"],
            "vazirmatn-fd": ["Vazirmatn FD"],
        },
        ...
    }
    ...
}

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

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

پس از فعال‌سازی فونت خود در پیکربندی تیلویند اکنون زمان اعمال فونت خود در متن قالب می‌باشد.

اعمال فونت در استایل‌ها

فایل globals.scss را در مسیر آورده شده زیر گشوده و بدنبال تکه کد زیر بگردید.

[lang='fa'] {
    --vis-font-family: 'Vazirmatn FD', sans-serif !important;

    .toaster {
        font-family: 'Vazirmatn FD', sans-serif;
    }
}

اکنون بجای Vazirmatn FD نام فونت مورد نظر خود را قرار دهید.

در همان فایل دومین مکان موردنیاز برای تغییر فونت را پیدا کنید:

html,
body {
    [lang='fa'] & {
        @apply font-vazirmatn-fd;
    }
}

اکنون بجای vazirmatn-fd نامی که برای فونت مورد نظر خود در پیکربندی تیلویند انتخاب کرده بودید را قرار دهید.

سومین و آخرین مکان موردنیاز برای تغییر فونت را در زیر ملاحظه می‌کنید.

[lang='fa'] .ql-container,
[lang='fa'] .leaflet-pane.leaflet-overlay-pane {
    font-family: 'Vazirmatn FD', sans-serif;
}

اکنون بجای Vazirmatn FD نام فونت مورد نظر خود را قرار دهید.

فونت‌های استفاده شده در نمودارها را باید بصورت مجزا تغییر دهید. بدین منظور هر نموداری که فایل آن را بگشایید در تنظیمات خود فونت بصورت Vazirmatn FD آورده شده و تنها کافی است در تنظیمات نمودار دنبال این نام باشید و آن را با نام دلخواه خود جایگزین نمائید.

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

در صورتی که در حالت dev قرار ندارید پس حتما یکبار پس از اعمال تغییرات دستور build را اجرا کنید.