به جلسه سیزدهم بخش آموزش طراحی سایت با المنتور از دوره رایگان وردپرس خوش آمدید. استفاده از فونت و آیکنهای مناسب روی طراحی سایت بسیار تاثیر گذار است. برگهساز المنتور به صورت پیش فرض فونتهای گوگل و تعدادی آیکن در خودش دارد. شما میتوانید فایل آیکن را به صورت 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 برای المنتور
درج فونت و آیکن سفارشی در المنتور و فرار از نصب افزونه
نصب بیش از حد افزونه، سایت جذاب شما را سنگین خواهد کرد. البته به اندازه نیاز استفاده از افزونهها بد نیست. شما میتوانید با نصب فونت و آیکن سفارشی در خود المنتور، دست کم برای این دو موضوع دیگر افزونهای نصب نکنید و سایت سبکتری را تحویل وب فارسی بدهید. اگر سوالی در مورد آموزش نصب فونت و آیکن سفارشی در المنتور دارید حتماً از متخصصین آژانس نوآوری رسام بپرسید.
14 پاسخ
سلام استاد حمدالهی عزیز. واقعا من عاشق فونت استعداد وریبل بودم ولی مشکلم اعدادش بود که انگلیسی بود. کد رو تو تنظیمات سایت المنتور بخش css اضافی وارد کردم و نتیجه جالب شد. یک دکمه ای به بخش تایپوگرافی در تب استایل اضافه شد. که با روشن شدنش اعداد بصورت فارسی نمایش داده شد. واقعا درود بر شما. هم این ویدیو عالی هم کد عالی و هم پکیج iconsax که در دوره ui هم ازش زیاد استفاده کردیم. درود بر شما. خیلی مخلصیم.
درود بر شما آقای مسعودی
عرض ادب، سپاس از لطف و مهربانی شما.
خوشحالم که کمک کننده بوده. من نیز ارادت زیادی هم به فونت استعداد (و بهطور کل، فونتهای سایت fontadmin و fontiran که واقعا عالی هستند) دارم.
واقعا دست طراجانشون درد نکنه. چهره وب پارسی زیباتر شد با این فونتها.
ارادتمندم. موفق باشید.
استاد حمدالهی با سلام. iconsax روی وب هاست بالا میاد روی لوکال هاست نمیاد.تا یک ساعت هم گذاشتم ببینم اضافه نمیشه که نمیشه.آیا بخاطر حجمش هست؟ میشه بگید از فیگما چجوری این فایل زیپ فونت-آیکون رو استخراج کنم حالا مثلا فقط linear رو زیپ کنم .ممنون میشم.ارادت فراوان
درود بر شما آقای مسعودی
پکیج iconsax که در سایت وجود دارد خودش به صورت فونت آیکن درآمده و نیازی نیست مجدد از فیگما خروجی بگیریم. سایت iconsax.io هم البته در دسترس است و آنجا هم میتوانید حالتهای مختلف آیکن را دریافت کنید. اضافه نشدن پکیج آیکن در لوکال ممکن است دلایلی همچون کم بودن مقدار Max Execution Time و Max Input Time باشد. چون اگر زمان آنها کم باشد در آپلود فایل به مشکل میخوریم. بهطور کل تمرین کردن در لوکال کمی دردسر دارد و بهتر است در هاست واقعی تمرین کنیم. البته آن دو مورد مذکور را هم میتوان در لوکال تنظیم کرد.
موفق باشید.
خسته نباشید استاد ممنون بابت زحمات
اگر فایلی که اپلود کردیم از اون ادرس پاکنیم فونت ها هم پاک میشن؟
درود بر شما. وقت شما بخیر
فایلهایی که پس از آپلود فونت و آیکن به رسانه وردپرس اضافه میشوند را نباید بعدش پاک بکنیم. مگر اینکه کلا آن فونت یا آیکنها را هم بعدا نخواهیم.
موفق باشید.
تشکر فراوان بابت آیکن ها و آموزش خوبتون
درود بر شما. وقت بخیر
سپاس از لطف و همراهی شما.
موفق باشید.
سلام جناب حمداللهی وقت بخیر
من iconsax رو در المنتور اضافه کرده ام اما در قالب ها در بخش آیکون ها،کتابخانه آیکون iconsax را نمایش نمیده.
درود بر شما. وقت شما بخیر
موقع آپلود لودینگ خاصی نداره آدم اشتباه میگیره گاهی. بنابراین به قسمت آیکنهای سفارشی یا همان custom icons در پیشخوان وردپرس بروید. روی پکیج آیکنی که قبلا ایمپورت کردید کلیک کنید و بروید داخلش. مطمئن بشوید که ظاهر آیکنها به درستی دیده میشوند. اگر کلا نبودند که دوباره آپلود کنید. اگر بودند و مربعی نشان داده میشد این یعنی مشکلی ممکن است سمت هاست هم وجود داشته باشد. دقت کنید که مقادیر memory limit را بالای 1024M و max execution time را هم از سی پنل حداقل روی 240 بگذارید. نسخه php هم باید حتما بالای 8.1 باشد و همچنین المنتور و المنتور پرو هم باید بروز باشند. به جز آپدیت افزونه که دست خودتان هست، سایر موضوعات را به هاستینگ هم تیکت بزنید افزایش میدهند. (در جلسه مربوط به افزونه wp-rocket این موارد را مفصل توضیح دادهایم).
موفق باشید.
سلام استاد ممنون میشم کمک کنید ایکون هارو اپلود کردم ولی نمیاره مشکل از چیست دو سه بارم تلاش کردم حذف و نصب کردم اصلا نشون نمیده هاست ایران م هستش
درود بر شما. وقت بخیر
بخش سلامت سایت و بخش تنظیمات سی پنل را حتما بررسی کنید. مثلا دقت کنید نسخه php حداقل 8.1 باشد. مقدار memory limit حتما بیش از 1024MB باشد. مقدار max execution time را بالای 240 بگذارید. این موارد رو در ادامه دوره توضیح دادیم که چطور تنظیم کنید. به هاستینگ هم تیکت بزنید براتون انجام میدهند.
موفق باشید.
سلام بین فونت های variable فقط استعداد بود که رایگان بود گفتم بقیه هم استفاده کنند البته من به عنوان طراح فونت های زیادی داشتم اما دیدم برای استفاده تجاری نیاز به لایسنس داره سایت بنده هم تجاری هست و فعلا برای شروع شرایط 800 تومان هزینه کرد رو نداشتم.
نکته بعدی استاد الان که تست کردم دیدم کاملا پنل شرایط فونت variable رو داره منتها tff آپلود میکنه نه woff.
درود بر شما. وقت شما بخیر
فونت وزیرمتن هم مشابه فونت استعداد قابلیت متغیر بودن را در خودش دارد.
عیب نداره میشه نسخه ttf رو بدید. چون صرفا یک فایل رو داره ازتون دریافت میکنه، مشکلی نیست. یکم طراحی این بخش توسط المنتور تغییر کرده اخیرا.
موفق باشید.