بخش بزرگی از انتقال معنای یک طراحی بر عهده تایپوگرافی است. وب سایت هم از این قاعده مستثنی نیست و انتخاب فونت مناسب و روش قالب بندی متن برای آن باید در اولویت‌های طراحی باشد.
فونتهای پرطرفدار ایران سنس ، ایران یکان ، یکان ، یکان بخ و غیره قالب نصب و فعال‌سازی در المنتور را دارند و خوشبختانه در این افزونه قسمتی وجود دارد که مخصوص اضافه کردن فونت در المنتور است و شما را از کدنویسی و اضافه کردن فایل های CSS بی‌نیاز می‌کند، اما ما در این مقاله هر 2 روش را به شما می‌آموزیم تا با توجه به توانایی خود فونت دلخواهتان را تنظیم کنید.
اما پیش از شروع آموزش 2 نکته را باید مد نظر قرار دهید:
[highlight color=”blue”]استفاده بیش از 2 فونت در وب سایت اصلا جایز نیست و آشنایی با مبحث وزن‌های فونت در طراحی سایت امری حیاتی است.[/highlight]
اگر این واژه برای شما آشنا نیست پیشنهاد می‌کنیم به ادامه این آموزش توجه کنید.
وزن فونت چیست؟
منظور از «وزن» (Weight)، میزان ضخیم یا نازک بودن فونت است. اغلب فونت‌ها طیفی از وزن‌های گوناگون دارند و بسته به میزان ضخامتشان از نازک تا درشت طبقه بندی می‌شوند. میانه‌ی این طیف معمولا وزن مدیوم یا regular قرار دارد. به طبقه بندی زیر توجه کنید:
انواع وزن فونت
- وزن 100 – Thin
- وزن 200 –Ultra-Light
- وزن 300 – Light
- وزن 400 – Normal
- وزن 500 – Medium
- وزن 600 –Demi Bold
- وزن 700 – Bold
- وزن 800 –Ultra Bold
- وزن 900 –Heavy
بیشتر بخوانید:
https://hostida.com/blog/general-settings-in-elementor/
نحوه اضافه کردن فونت در المنتور
اکنون که با وزن‌های فونت‌ها آشنا شدید، به سراغ مبحث اصلی این مقاله یعنی نحوه اضافه کردن فونت در افزونه پرطرفدار Elementor می‌رویم.
- اولین قدم این است که وارد پیشخوان وردپرس شوید و فونتهای سفارشی یا Custom Fonts را انتخاب کنید.
- سپس دکمه “افزودن جدید” یا Add New را انتخاب کنید تا اولین فونت خود را به وب‌سایت اضافه کنید.
- حالا مطابق تصویر، نام فونت مورد نظر را در باکس وارد کنید. برای مثال IranSans
- روی دکمه افزودن فونت متغییر کلیک کنید.
اکنون باید فونت مورد نظر را با فرمت‌های مختلف بارگذاری کنید. این فرمت‌ها در فونت خریداری شده یا رایگان موجود هستند.
- مطابق عکس بالا، فرمت‌های woff ، woff2 ، TTF ، SVG ، EOT باید بارگذاری شوند.
- سپس حالت ضخیم یا Bold را انتخاب کنید.
- روی “انتشار” کلیک کنید.
اگر طبق این مراحل را درست طی کرده باشید باید در المان های المنتور خود در قسمت استایل خانواده فونت IranSans با وزن ضخیم را داشته باشید.
همانطور که در ابتدا گفتیم 2 روش برای افزودن فونت به المنتور وجود دارد. اگر مایل هستید از کدهای CSS برای افزودن فونت استفاده کنید باید به این ترتیب پیش بروید:
اضافه کردن فونت با CSS
از طریق مسیر پیشخوان > نمایش > ویرایشگر پرونده پوسته کد CSS را در قسمت Style.css کپی کنید. فراموش نکنید که اگر می‌خواهید نتیجه مطلوب را بگیرید حتما از قالب child استفاده کنید.
@font-face {
font-family: Iransans;
font-style: normal;
font-weight: 400;
src: url('link font .eot');
src: url('link font .eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('link font .woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('link font .woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('link font .ttf') format('truetype');
}
در پایان…
یکی دیگر از سری مقالات آموزش المنتور همین‌جا به پایان رسید. در این آموزش ها سعی کرده ایم طراحی سایت وردپرسی را به سادگی ترین شکل ممکن به کمک افزونه المنتور به شما بیاموزیم تا بدون دانش کدنویشی سایت منحصربفرد خود را ایجاد کنید. خواهشمندیم با ارائه نظرات و پیشنهادات خود ما را در بهبود محتوای ارائه شده یاری کنید.
