فونت‌های متغیر وردپرس را می توان نوعی فناوری بسیار کاربردی در حوزه طراحی سایت دانست که به افراد اجازه می‌دهند تا با انعطاف‌پذیری بیشتری به شخصی‌سازی فونت‌ها بپردازند.
برخلاف فونت‌های سنتی (استاتیک) که برای هر سبک مانند (پررنگ، مورب یا فشرده) به یک فایل جداگانه نیاز دارند، فونت‌های متغیر تمامی این سبک‌ها را تنها در یک فایل واحد جای می‌دهند. این ویژگی به طراحان سایت امکان می‌دهد تا با تنظیم پارامترهایی مانند ضخامت، عرض و اندازه، فونت‌های خود را به صورت پویا و بر اساس نیاز پروژه تنظیم کنند.
مزایای استفاده از فونت‌های متغیر در وردپرس
- کنترل دقیق بر روی فونت: دیگر نیازی نیست از میان چند گزینه محدود، سایز بخصوصی را برای فونت خود انتخاب کنید. با فونت‌های متغیر، افراد می‌توانند هر ضخامتی را که نیاز دارند (مثلاً 475 به جای 400 یا 600) انتخاب و با این سطح از کنترل، شخصی‌سازی بی‌نظیری را تجربه کنند.
- بهبود عملکرد وب‌سایت: با استفاده از یک فایل واحد برای تمام سبک‌های فونت، تعداد درخواست‌های HTTP کاهش می‌یابد و در نتیجه زمان بارگذاری صفحات نیز بهبود می‌یابد.
- تایپوگرافی واکنش‌گرا: فونت‌های متغیر به طراحان اجازه می‌دهند تا فونت‌ها را بر اساس اندازه صفحه نمایش، رزولوشن و ترجیحات کاربر تنظیم کنند. به عنوان مثال، یک فونت می‌تواند در صفحه‌های کوچک‌تر فشرده‌تر شود تا فضای کمتری اشغال کند و یا در اندازه‌های کوچک‌تر، کنتراست بیشتری داشته باشد تا خوانایی آن افزایش یابد.
- یکپارچگی با CSS: فونت‌های متغیر به خوبی با CSS یکپارچه می‌شوند. این بدان معناست که طراحان سایت می‌توانند از ویژگی‌های CSS برای کنترل دقیق فونت‌های متغیر بهره برده و حتی انیمیشن‌های جذابی برای آنها ایجاد کنند.
افزودن فونت‌های متغیر با المنتور
برای استفاده از فونت‌های متغیر در پروژه‌های وردپرسی، می‌توانید از افزونه‌های مختلفی استفاده کنید. یکی از محبوب‌ترین این ابزارها، المنتور است که به شما اجازه می‌دهد تا به راحتی فونت‌های متغیر را اضافه کنید.
مراحل افزودن فونت متغیر به المنتور:
- انتخاب فونت: یک فونت متغیر مناسب را از منابعی چون گوگل فونت انتخاب و دانلود کنید.
- وارد کردن فونت به المنتور: به بخش فونت‌های سفارشی المنتور بروید و گزینه افزودن فونت متغیر را انتخاب کنید. سپس فایل فونت دانلود شده را آپلود و یک نام دلخواه برای آن انتخاب کنید.
- تنظیم پارامترهای فونت: حداقل و حداکثر وزن و عرض فونت را مشخص کنید. این اطلاعات معمولاً در فایل فونت یا وب‌سایت ارائه دهنده‌ی فونت در دسترس هستند.
- استفاده از فونت در ویجت‌ها: پس از افزودن فونت، می‌توانید از آن در هر ویجتی که دارای گزینه تنظیم فونت است استفاده کنید. به عنوان مثال، در ویجت عنوان، می‌توانید فونت متغیر خود را انتخاب کرده و با استفاده از تنظیمات وزن و عرض، یک ظاهر دلخواه برای عنوان فوق ایجاد کنید.
با مراجعه به سایت گوگل فونت می توانید فونت متغیر دلخواه تان را انتخاب کنید. بهتر است در بخش Font tester حداقل و حداکثر مقدار مورد نیاز برای وزن و اندازه فونت را تنظیم و در بسته دانلودی قرار دهید.
پس از دانلود بسته فونت، وارد پیشخوان وردپرس شده و به بخش Custom Fonts در افزونه المنتور بروید.
پس از ورود به بخش فونت سفارشی در المنتور، بر روی گزینه Add Fonts کلیک کرده و Add Variable Font را انتخاب کنید.
پس از انتخاب فایل مربوط به فونت متغیر، آن را آپلود کرده و فایل ttf را انتخاب کنید.
در صفحه پایین، یک نام برای فونت خود انتخاب کنید.
حال باید برای فونت متغیر خود، مقدار وزن و اندازه را بصورت حداقل و حداکثر تعریف کنید. اطلاعات فوق را در سایت گوگل فونت مشخص کرده بودید.
در انتها کافی است بر روی Publish کلیک کنید تا فونت شما برای استفاده در Elementor Editor قابل استفاده شود.
استفاده از فونت متغیر در Elementor Editor
برای استفاده از فونت های متغیر در المنتور، پس از نصب و تنظیم آنها کافی است در محیط Editor افزونه المنتور، ویجت متن را انتخاب و بر روی صفحه بکشید.
در بخش Typography ویجت متن می توانید از تب Style، فونت متغیر خود را انتخاب کنید.
نویسنده علیرضا ناجی
سایر مقالات نویسندهعلیرضا ناجی، فعال حوزه سئو و اسکیما می‌باشد. وی در زمینه تحقیق و ترجمه مقالات و آموزش حوزه فناوری اطلاعات، سئو و اسکیمای حرفه ای، بازی های رایانه ای و شبکه های اجتماعی فعالیت می‌کند و جدیدترین عناوین را به صورت محتوی غنی منتشر می‌نماید.
