آموزش نصب فونت در المنتور وردپرس (Elementor)

نصب فونت در المنتور یکی از قابلیت‌های افزونه Elementor Pro است که شما را از کدنویسی CSS برای اضافه کردن فونت فارسی به المنتور بی نیاز خواهد کرد. در المنتور پرو قابلیتی برای افزودن فونت سفارشی قرار داده شده است که می‌توانید به تعداد بی نهایت فونت دلخواه به این صفحه ساز اضافه کنید.

تنظیمات فونت در المنتور به شکلی هستند که امکان انتخاب فونت‌های افزوده شده را در مراحل طراحی صفحات داشته و می‌توانید برای هر المان از فونت دلخواه خود استفاده کنید.

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

آموزش نصب فونت در المنتور وردپرس (Elementor)

سیستم مدیریت محتوای وردپرس (Wordpress) جزو محبوب‌ترین سیستم‌ها برای ساخت سایت و فروشگاه اینترنتی است که در ایران نیز بسیار مورد استفاده قرار می‌گیرد. این سایت‌ساز پیشرفته و در عین‌حال بسیار ساده ماژولار بوده و با استفاده از پلاگین‌ها (افزونه) امکان اضافه کردن امکانات متنوع را دارد.

در این بین افزونه المنتور (Elementor) نیز یکی از پلاگین‌های محبوب برای این سایت ساز است که امکان طراحی ساده‌تر صفحات را در اختیارتان قرار خواهد داد که بدون نیاز به دانش برنامه نویسی به سادگی بتوانید ساختار هر یک از صفحات خود را با چیدمان، ظاهر و رنگ‌بندی دلخواه خود تنظیم کنید.

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

گام اول: دانلود فونت برای المنتور

قبل از هر چیز باید فونت خود را تهیه کنید. توصیه می‌کنم تا جای ممکن از فرمت WOFF2 که کم حجم‌ترین و بهینه‌ترین فونت برای سایت است استفاده کنید. می‌توانید با مراجعه به صفحه دانلود فونت سایت برای المنتور به لیستی از فونت‌هایی که قابل استفاده برای سایت هستند در سایت فونتچی دسترسی داشته باشید.

سایت فونتچی به نشانی www.fontchi.com به صورت تخصصی در زمینه نقد، بررسی و دانلود فونت فعالیت دارد. به کمک این سایت می‌توانید به لیستی از فونت‌های مختلف بر اساس سبک خط، رایگان و غیر رایگان، فونت‌های متغیر و فونت‌ها بر اساس محیط مناسب برای استفاده دسترسی داشته باشید.

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

گام دوم: افزودن فونت به المنتور در وردپرس

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

هشدار: برای نصب فونت در المنتور باید افزونه المنتور پرو (Elementor Pro) در سایت شما نصب شده باشد. از آنجایی که این نسخه از المنتور پولی است و نیاز به خرید لایسنس دارد، توصیه می‌کنم از سایت‌ها و مارکت‌های ایرانی این افزونه را به دلیل نال بودن و کد گذاری، برای جلوگیری از مشکلات امنیتی در سایتتان به هیچ‌وجه خریداری نکنید. سایت‌های مختلفی در زمینه خدمات خرید دلاری از سایت خارجی فعالیت دارند، که به کمک آنها می‌توانید به صورت قانونی و لایسنس اورجینال افزونه المنتور را تهیه کنید.

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

1. نشانگر ماوس را روی منوی المنتور پیشخوان وردپرس هاور کنید.
2. از زیرمنوی موجود روی منوی فونت‌های سفارشی یا در صورت انگلیسی بودن Custom Fonts کلیک کنید.
3. حال در صفحه نمایش داده شده روی دکمه افزودن فونت جدید یا در صورت انگلیسی بودن ADD NEW را مطابق تصویر بالا انتخاب کنید.

در این صورت وارد صفحه‌ای مشابه تصویر زیر خواهید شد که باید مراحل افزودن فونت به المنتور را با وارد کردن نام فونت و تنظیمات مربوط به وزن و فایل فونت کامل کنید.

در این مرحله کافی است قبل از هرچیزی نام فونت خود را در کادر Enter Font Family که در واقع فیلد عنوان است مانند تصویر بالا وارد کنید. در اینجا من قصد دارم مراحل نصب فونت ایران یکان در المنتور را برای نمونه به شما آموزش دهم، بنابراین نام فونت را IranYekan وارد می‌کنم.

توجه: نامی که در عنوان فونت وارد می‌کنید، نامی است که به خانواده فونت اختصاص داده می‌شود. بنابراین این نام حتما باید انگلیسی بوده و همچنین در وارد کردن نام و استفاده از قلم در بخش‌های دیگر سایت، به کوچکی و بزرگی حروف استفاده شده در نام خانواده فونت دقت کنید.

در نهایت روی دکمه ADD FONT VARIATION کلیک کنید تا مشابه تصویر زیر فرم مربوط به آپلود فونت در المنتور و تنظیمات استایل فونت نمایش داده شود.

1. قبل از هر چیز باید وزن فونتی که می‌خواهید نصب کنید را مشخص کنید. بنابراین متناسب با فایل فونتی که در مرحله بعد انتخاب خواهید کرد، از بخش وزن ساختار font-weight را روی یکی از گزینه‌های نرمال تا ۹۰۰ تنظیم کنید. در این آموزش من از فایل فونت وریبل ایران یکان استفاده خواهم کرد، بنابراین همان ساختار نرمال را بدون تغییر انتخاب کرده‌ام.
2. در این بخش باید فایل فونت خود را در کادر مربوطه که بر اساس فرمت فایل مشخص شده است آپلود کنید. توصیه می‌کنم صرفا از یک فرمت خاص استفاده کنید. بهترین و بهینه‌ترین فرمت WOFF2 است که توسط Mozilla توسعه داده شده و نسبت به سایر فرمت‌ها حجم کمتری دارد. این موضوع سبب کمک به افزایش سرعت سایت می‌گردد. پس ابتدا روی دکمه UPLOAD کلیک کرده و در نهایت فایل فونت خود را از طریق رسانه وردپرس آپلود کنید تا آدرس فایل مانند نمونه در کادر مربوطه اضافه شود.
3. به همین ترتیب برای سایر وزن‌های ۱۰۰ تا ۹۰۰ می‌توانید فایل فونت خود را با کلیک روی دکمه ADD FONT VARIATION اضافه کنید.

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

در پایان روی دکمه انتشار که کلید کنید، مراحل نصب فونت در المنتور به پایان رسیده است و حالا نوبت این است که از این فونت در سایت استفاده کنید.

گام پایانی: تغییر فونت پیش فرض المنتور

با انجام مراحل بالا فونت فارسی به المنتور افزوده شده است. حالا تنها کاری که باید انجام دهید استفاده از فونت سفارشی المنتور است. برای این منظور می‌توانید از روش زیر استفاده کنید.

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

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

1. روی آیکون تنظیمات در بالای صفحه کلیک کنید. در این صورت می‌توانید به تنظیمات کلی المنتور برای سایت دسترسی داشته باشید. در این مرحله باید روی گزینه تنظیمات فونت سایت کلیک کنید تا صفحه‌ای مشابه تصویر بالا باز شود.
2. از بخش فونت‌های سیستم روی آیکون ویرایش که در مقابل گزینه اولیه یا به انگلیسی Primary کلیک کنید.
3. گزینه خانواده فونت یا به انگلیسی Font Family را انتخاب کرده و از لیست باز شده، فونتی که به‌عنوان فونت سفارشی المنتور اضافه کردید را انتخاب کنید.
4. در نهایت روی دکمه ذخیره تغییرات کلیک کنید.

با انجام این مراحل فونت کلی سایت به فونت سفارشی ساخته شده تغییر خواهد یافت. البته منظور فونت صفحاتی و المان‌هایی است که با استفاده از المنتور طراحی شده باشد.

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

برای تغییر فونت تمامی بخش‌ها می‌توانید در تنظیمات قالب نام فونت اضافه شده را وارد کنید یا اینکه از راهنمای نصب فونت در وردپرس که روش‌های مختلفی را توضیح داده‌ام استفاده کنید.

---

جمع بندی نهایی

با اینکه المنتور و به تبع قالب‌های وردپرسی پیشرفته امکان افزودن فونت فارسی را به همین شیوه (انتخاب نام فونت و آپلود در تنظیمات) در اختیار قرار می‌دهند، اما استانداردترین و بهترین روش برای استفاده از فونت فارسی در المنتور یا هر صفحه ساز دیگری برای وردپرس، نصب فونت به صورت دستی از طریق کدهای CSS است.

دلیل امر این است که وقتی شما از نصب فونت سفارشی در المنتور استفاده می‌کنید، لود فونت‌ها در سایت به صورت اینلاین خواهد بود که از دو جهت روی کاهش سرعت سایت تاثیر می‌گذارد. یکی افزایش DOM ELEMENT صفحات است که با قرار گرفتن کدهای بیشتر در سورس صفحات، رندر کامل صفحه طولانی خواهد شد و دیگری اینکه در هر بار لود صفحات درخواست برای لود فونت ارسال خواهد شد که به صورت کش شده نیست.

در حالی که وقتی به صورت دستی لود فونت را در فایل style.css یا rtl.css قالب اضافه می‌کنید، این فایل همین که برای اولین بار لود شود کش خواهد شد و در بازدیدهای بعدی کاربر تا زمانی که کش منقضی نشود درخواستی برای لود دوباره فونت به سرور ارسال نمی‌گردد. از سوی دیگر، فایل کش شده CSS از قبل در داده‌های کش مرورگر قرار می‌گیرد که به همین جهت به محض شروع رندر این فایل متون نمایش داده شده با همان فونت انتخاب شده خواهند بود.

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