آموزش افزودن فونت سفارشی به المنتور (Elementor) + ویدیو آموزشی | اوج سایت

🎬 در ویدیوی زیر که توسط تیم اوج سایت آماده شده، به صورت عملی و ساده نحوه افزودن فونت را یاد می‌گیرید. پیشنهاد می‌کنیم حتماً مشاهده کنید:

اگر از کاربران المنتور هستید و می‌خواهید فونت دلخواه خود را به طراحی سایت‌تان اضافه کنید، جای درستی آمده‌اید. در این مقاله از اوج سایت با آموزش گام‌به‌گام افزودن فونت سفارشی به المنتور در خدمت شما هستیم. چه فونت فارسی بخواهید اضافه کنید مثل “ایران‌سنس” یا “وزیر”، و چه فونت انگلیسی، این آموزش برای شماست.


چرا باید فونت دلخواه را به المنتور اضافه کنیم؟

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


روش‌های افزودن فونت به المنتور

روش ۱: استفاده از تنظیمات خود المنتور (نسخه پرو)

اگر از نسخه پرو المنتور استفاده می‌کنید، کار شما بسیار ساده است.

مراحل:

  1. از پیشخوان وردپرس به مسیر زیر بروید:
    Elementor > Custom Fonts

  2. روی دکمه Add New کلیک کنید.

  3. یک نام برای فونت وارد کنید (مثلاً: IranYekan).

  4. حالا فایل فونت خود را در فرمت‌های مختلف (woff, woff2, ttf, eot, svg) آپلود کنید. توصیه می‌کنیم از فرمت woff2 و woff استفاده کنید چون سریع‌تر و سبک‌ترند.

  5. پس از ذخیره، حالا فونت شما به لیست فونت‌های المنتور اضافه شده و در تنظیمات تایپوگرافی قابل انتخاب است.


روش ۲: افزودن فونت با کدنویسی (ویژه نسخه رایگان المنتور)

اگر از نسخه رایگان المنتور استفاده می‌کنید، باز هم می‌توانید فونت دلخواه را اضافه کنید، اما نیاز به کمی کدنویسی دارید.

مراحل:

  1. فایل‌های فونت خود را در پوشه‌ای در هاست آپلود کنید (مثلاً در پوشه wp-content/uploads/fonts).

  2. حالا کد زیر را به فایل functions.php قالب یا افزونه سفارشی اضافه کنید:

php
function custom_fonts_enqueue() {
wp_enqueue_style( 'custom-fonts', get_template_directory_uri() . '/fonts/fonts.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_fonts_enqueue' );
  1. در فایل fonts.css مسیر فایل فونت‌ها را به این شکل وارد کنید:

css
@font-face {
font-family: 'IranYekan';
src: url('https://yourdomain.com/wp-content/uploads/fonts/IranYekan.woff2') format('woff2'),
url('https://yourdomain.com/wp-content/uploads/fonts/IranYekan.woff') format('woff');
font-weight: normal;
font-style: normal;
}
  1. حالا در المنتور در بخش «تنظیمات سفارشی CSS» برای المان مورد نظر، فونت را اعمال کنید:

css
selector {
font-family: 'IranYekan', sans-serif;
}

نکات مهم در استفاده از فونت سفارشی

  • همیشه از فرمت‌های سبک‌تر مثل .woff2 استفاده کنید.

  • نام فونت را دقیق وارد کنید تا در المنتور شناسایی شود.

  • اگر قالب شما تنظیمات فونت دارد، ممکن است نیاز باشد آن را override کنید.

  • سعی کنید فونت را در چند وزن مختلف (regular, bold, etc) آپلود کنید.


مزایای استفاده از فونت سفارشی در طراحی سایت

  • افزایش زیبایی و هویت بصری سایت

  • بهبود تجربه کاربری (UX)

  • هماهنگی با برندینگ گرافیکی شما

  • سرعت بهتر نسبت به استفاده از فونت‌های CDN در بعضی موارد


جمع‌بندی

افزودن فونت به المنتور

اضافه کردن فونت دلخواه به المنتور نه تنها ظاهر سایت شما را حرفه‌ای‌تر می‌کند بلکه باعث ارتقای برند شما نیز می‌شود. چه با نسخه رایگان کار می‌کنید و چه نسخه پرو، با آموزش‌های اوج سایت می‌توانید به راحتی این کار را انجام دهید.


سوالات متداول (FAQ)

۱. آیا می‌توانم فونت فارسی مثل ایران‌سنس را به المنتور اضافه کنم؟
بله، با همین روش می‌توانید فونت‌های فارسی محبوب را اضافه کنید.

۲. نسخه رایگان المنتور هم از فونت دلخواه پشتیبانی می‌کند؟
بله، با روش کدنویسی که در بالا گفته شد می‌توانید این کار را انجام دهید.

۳. چند نوع فرمت فونت لازم است؟
حداقل فرمت‌های .woff2 و .woff را بارگذاری کنید تا روی همه مرورگرها پشتیبانی شود.

۴. آیا فونت دلخواه روی موبایل هم نمایش داده می‌شود؟
بله، اگر فونت به درستی بارگذاری شده باشد، در موبایل و تبلت هم نمایش می‌یابد.

۵. چطور بفهمم فونتم درست لود شده؟
با استفاده از ابزار Inspect در مرورگر می‌توانید فونت اعمال‌شده را بررسی کنید.


اگر سوال یا مشکلی درباره فونت در المنتور دارید، همین حالا در بخش نظرات مطرح کنید یا از طریق تماس با اوج سایت با ما در ارتباط باشید.

Picture of محمدامین محمدپور

محمدامین محمدپور

طراح گرافیک، طراحی سایت و برنامه نویس وب

این محتوا را با دوستانتان به اشتراک بگذارید!

Email
Twitter
Pinterest
WhatsApp
Telegram

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *