نصب فونت و آیکن سفارشی در المنتور

به جلسه سیزدهم بخش آموزش طراحی سایت با المنتور از دوره رایگان وردپرس خوش آمدید. استفاده از فونت و آیکن‌های مناسب روی طراحی سایت بسیار تاثیر گذار است. برگه‌ساز المنتور به صورت پیش فرض فونت‌های گوگل و تعدادی آیکن در خودش دارد. شما می‌توانید فایل آیکن را به صورت svg یا png هم آپلود کنید و برای فونت هم از تمام فونت‌های رایگان گوگل استفاده کنید.

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

نصب فونت سفارشی در المنتور

برای نصب فونت در برگه‌ساز المنتور، از پیشخوان وردپرس و منوی مربوط به المنتور، گزینه فونت‌های سفارشی و یا custom fonts را انتخاب کنید و سپس از بالای صفحه روی گزینه اضافه کردن یا Add new کلیک کنید تا با صفحه زیر مواجه شوید. ابتدا باید برای فونت خود یک نام انتخاب کنید. سپس روی دکمه پائین یعنی اضافه کردن فونت‌های متفاوت یا Add font variants کلیک کنید. این گزینه برای درج تنوع وزن فونت است که اصطلاحاً به این نوع تنوع‌ها font variants می‌گویند.

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

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

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

فرمت‌های مناسب فونت برای آپلود در وردپرس

فرمت‌های مختلفی از فونت وجود دارد. اما نیازی به نصب همه آن‌ها نیست. فرمت‌های svg و eot در اغلب مرورگرها پشتیبانی نمی‌شوند. همچنین فرمت‌هایی مانند tif و otf نیز بیشتر مناسب نصب روی سیستم عامل هستند. پس این چهار فرمت را در المنتور و به طور کل در وب، نصب نکنید. نسخه‌های مناسب وب woff و woff2 هستند. حتی woff2 به تنهایی کافی است اما اگر woff هم نصب کنید، مرورگرهای قدیمی‌تر، مشابه آنچه که در جدول زیر می‌بینید، از فونت مدنظر شما پشتیبانی خواهند کرد.

فارسی کردن اعداد در فونت‌های Variable

نکته مثبت فونت‌های متغیر یا Variable این است که دیگر نیاز ندارید برای اعداد فارسی و انگلیسی دو سری فونت‌ها را آپلود کنید. مهم‌تر آنکه دیگر نیاز ندارید به ازای هر وزن از فونت، فایل آن را آپلود کنید. وقتی فونت متغیر است یعنی مانند ریاضی یک سری پارامتر دارد که قابل تغییر هستند. یکی از این پارامترها Font Stylistics است که معمولاً اعداد فارسی و انگلیسی، اینکه آن فونت مثلاً نقطه گرد، مربعی یا لوزی داشته باشد و انواع و اقسام پارامترهای دیگر.

body {
-moz-font-feature-settings: "ss02";
-webkit-font-feature-settings: "ss02";
font-feature-settings: "ss02";
}

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

نصب آیکن سفارشی در المنتور

گاهی اوقات استفاده از یک آیکن می‌تواند گویای چندین پاراگراف متن باشد. در دوره آموزش ui ux رایگان در مورد آیکن‌ها در ui صحبت کردیم به شما پیشنهاد می‌کنیم ویدیو مربوطه را مشاهده کنید. برگه‌ساز المنتور به‌صورت پیش فرض آیکن دارد. اما هم تنوع و جذابیت بالایی ندارند و هم تعداد آن‌ها برای برخی پروژه‌ها کافی نیست. شما می‌توانید برای آیکن افزونه نیز نصب کنید. اما از آن اصولی‌تر، افزودن پکیج آیکن به برگه‌ساز المنتور است. بدین منظور، از پیشخوان وردپرس و منوی مربوط به المنتور، گزینه آیکن‌های سفارشی یا custom icons را انتخاب کنید و سپس از بالای صفحه روی گزینه اضافه کردن یا Add new کلیک کنید تا با صفحه زیر مواجه شوید.

برای پکیج فونت خود یک نام انتخاب کرده و منتظر شوید تا فونت‌های شما آپلود شوند. سپس روی گزینه بروزرسانی کلیک کنید. دقت کنید که شما نمی‌توانید یک پوشه از فایل‌های آیکن با فرمت png و یا حتی svg را زیپ کنید و اینجا به المنتور تحویل دهید. فایل شما باید اصطلاحاً یک پکیج زیپ شده از نوع Fonticon باشد. بنابراین باید آیکن‌های svg خود را وارد ابزاری مانند IcoMoon یا Fontastic کنید و آن‌ها را تبدیل به Fonticon کنید. البته نیازی به این کار ندارید. پکیج iconsax را برای شما آماده کرده‌ایم. در صورت تمایل همین پکیج را آپلود کنید.

دانلود پکیج هزارتایی iconsax برای المنتور

درج فونت و آیکن سفارشی در المنتور و فرار از نصب افزونه

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