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

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

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

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

<title>باوهاوس - معماری و تزئینات داخلی</title>

<!-- Styles -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i%7CPoppins:300,400,500,600,700" rel="stylesheet">
<!-- نمونه فونت برای مثال -->
<link href="https://fonts.eltheme.ir/elFont" rel="stylesheet">

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

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

@import "_vazirmatn.css";

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

پس از ادغام فونت خود به یکی از روش‌های بالا اکنون زمان اعمال فونت خود در متن قالب می‌باشد. بدین منظور فایل fonts.css از داخل فولدر css بایستی ویرایش گردد. مشخصه‌ی [lang="fa"] مشخص می‌کند که تغییر فونت بر روی صفحاتی اعمال می‌گردد که زبان آنها به فارسی تغییر یافته است. سپس در بلوک این مشخصه المان‌های موردنظر جهت اعمال فونت انتخاب می‌گردند.

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

@import "_vazirmatn.css";
[lang=fa] body {
  font-family: "Vazirmatn FD", sans-serif;
  letter-spacing: 0;
}
[lang=fa] blockquote {
  font-family: "Vazirmatn FD", sans-serif;
}
[lang=fa] .review-carousel .text {
  font-family: "Vazirmatn FD", sans-serif;
}

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