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

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

این راهنمایی در خصوص تهیه فونت نیست و فرض بر این می‌باشد که شما فونت خود را تهیه کرده و فایل یا آدرس آن را در اختیار دارید.

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

در صورتی که می‌خواهید فونت موردنظر و دلخواه خود را از طریق آدرس آن بر روی قالب سوار کنید بایستی آدرسی که در دست دارید را در قسمت هد یا سر صفحات HTML قرار دهید. در ادامه نمونه کدی را مشاهده خواهید نمود که به شما مسیر درست قرار دادن آدرس فونت را نشان می‌دهد. به عنوان مثال می‌خواهیم فونتی به نام elFont را از آدرس آن در اینجا قرار دهیم:

HTML

index.html

<head>

<title>داشبورد - بانک کمپانی</title>
<!-- نمونه فونت برای مثال -->
<link href="https://fonts.eltheme.ir/elFont" rel="stylesheet" />

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

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

/assets/css/fonts.scss

@import "_vazirmatn.css";

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

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

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

tailwind.config.js

theme: {
    extend: {
        fontFamily: {
            urbanist: ["Urbanist", "sans-serif"],
            poppins: ["Poppins", "sans-serif"],
            "vazirmatn": ["Vazirmatn"],
            "vazirmatn-fd": ["Vazirmatn FD"],
        },
        ...
    }
    ...
}

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

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

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

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

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

/assets/css/style.css

[lang='fa'] body {
    font-family: "Vazirmatn FD", sans-serif;
}

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

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

در همه‌ی فایل‌های HTML به کمک وب‌استورم با کلید ترکیبی ctrl+r در ویندوز یا کلید ترکیبی ⌘+r در مک را بفشارید و کلاس font-vazirmatn را با کلاس مورد نظر خود که در بخش extend پیکربندی تیلویند وارد کرده‌اید جایگزین نمائید.

/home.html

<body
    class="home relative box-border w-full overflow-x-hidden font-vazirmatn-fd 2xl:px-0"
>

به عنوان مثال در کد بالا بجای font-vazirmatn-fd درصورتی که نام فونت مورد نظر خود را قرار دهید به کد زیر خواهید رسید.

/home.html

<body
    class="home relative box-border w-full overflow-x-hidden font-elfont 2xl:px-0"
>

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

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