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

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

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

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

@import "vazirmatn";

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

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

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

theme: {
    ...
    extend: {
        fontFamily: {
            sans: ['"Bricolage Grotesque"', ...defaultTheme.fontFamily.sans],
            "vazirmatn": ["Vazirmatn"],
            "vazirmatn-fd": ["Vazirmatn FD"],
        },
        ...
    }
    ...
}

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

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

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

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

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

@layer base {
    html,
    body {
        @apply [&::-webkit-scrollbar-thumb]:bg-gray-400
        dark:[&::-webkit-scrollbar-thumb]:bg-slate-500
        [&::-webkit-scrollbar-track]:bg-transparent
        [&::-webkit-scrollbar]:w-3;

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

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

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

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