آموزش صفر تا صد اعمال فونت سفارشی در قالب وودمارت
اگه از ظاهر فونتهای پیشفرض قالب وودمارت خسته ای و دوست داری سایتت یه ظاهر جذاب و شیک داشته باشه، وقتشه که با اعمال فونت سفارشی در قالب وودمارت آشنا بشی. توی این مقاله از سایت کنترل وب مرحله به مرحله با هم یاد میگیریم چطور یه فونت اختصاصی روی سایت وردپرسیمون با قالب وودمارت پیاده کنیم.
چرا باید فونت سفارشی استفاده کنیم؟
قبل از اینکه بریم سراغ مراحل اعمال فونت سفارشی در قالب وودمارت، بذار یه کم در مورد دلایل استفاده از فونتهای سفارشی صحبت کنیم:
ظاهر سایت خاصتر و حرفهایتر میشه
میتونی هویت برندتو بهتر نشون بدی
خوانایی و تجربه کاربری بهتر میشه
تاثیر مثبت روی سئو و ماندگاری کاربران در سایت
مرحله اول: انتخاب و دانلود فونت مورد نظر
اولین قدم برای اعمال فونت سفارشی در قالب وودمارت، انتخاب یه فونت زیبا و مناسب برای سایتته. برای این کار میتونی از منابع زیر استفاده کنی:
fontiran.com برای فونتهای فارسی حرفهای
- ctrlweb.irبرای دانلود فونت های جذاب فارسی
Google Fonts برای فونتهای انگلیسی و رایگان
فونتیار برای فونتهای ترکیبی فارسی/لاتین
بعد از انتخاب فونت، باید فایلهایی با فرمتهای .woff, .woff2, .ttf, .eot رو دانلود کنی. پیشنهاد میکنم حداقل دو فرمت woff و woff2 رو داشته باشی، چون سبک و سریع هستن.
آپلود فونت در هاست وردپرس
در این بخش از آموزش اعمال فونت سفارشی در قالب وودمارت باید فایلهای فونت رو داخل هاست آپلود کنیم:
وارد هاست یا پنل مدیریت فایلهات (File Manager یا FTP) شو
به مسیر
/wp-content/uploads/fontsبرو. اگه همچین پوشهای وجود نداره، خودت بسازش.فونتهات رو توی این مسیر آپلود کن
نکته: اگه فونت فارسی داری، اسم فایلهات انگلیسی باشه که مشکلی توی نمایش یا لود نداشته باشن.
نوشتن کد CSS برای فونت
خب، الان نوبت کدنویسیه! برای اعمال فونت سفارشی در قالب وودمارت باید فونت رو با استفاده از CSS به سایت معرفی کنیم:
توی کد بالا:
'MyCustomFont'اسم فونتت هست که هرچی دوست داری میتونی بذاریآدرسها هم باید دقیقاً به مسیر آپلود شده اشاره کنن
اعمال فونت روی اجزای سایت
تا اینجای کار، فونت معرفی شده. حالا باید بگیم کجاها ازش استفاده بشه. توی همون فایل CSS میتونی کدهای زیر رو اضافه کنی:
این دستور باعث میشه تمام متنها، عنوانها و لینکها فونت جدید رو استفاده کنن. میتونی بر اساس نیازت این رو شخصیسازی هم بکنی.
اضافه کردن CSS به سایت
برای اینکه مراحل اعمال فونت سفارشی در قالب وودمارت به درستی انجام بشن، باید این CSS رو داخل سایتت قرار بدی. چند روش براش هست:
1. از طریق تنظیمات قالب وودمارت
برو به:
پیشخوان وردپرس > قالبها > تنظیمات قالب > تب Custom CSS
کد CSS رو اونجا بذار و ذخیره کن.
2. از طریق افزونه Code Snippets
اگه دوست نداری کدهات پاک بشن یا با آپدیت قالب بریزن به هم، از افزونههایی مثل “Simple Custom CSS” یا “WP Code” استفاده کن.
اعمال فونت سفارشی در قالب وودمارت با استفاده از المنتور
اگه ازصفحهساز المنتوراستفاده میکنی، برای اعمال فونت سفارشی در قالب وودمارت این مراحل رو طی کن:
وارد المنتور شو
روی بخش مورد نظر کلیک کن
در قسمت Typography گزینه Font Family رو باز کن
اگه فونت توی سیستم لود شده باشه، میتونی دستی اسمش رو وارد کنی
تنظیمات رو ذخیره کن
بررسی نهایی و کش مرورگر
برای اینکه مطمئن شی اعمال فونت سفارشی در قالب وودمارت درست انجام شده:
کش مرورگرتو پاک کن
سایت رو در حالت incognito ببین
با چند مرورگر و دستگاه مختلف تست کن
نکات مهم در اعمال فونت سفارشی در قالب وودمارت
از فونتهای سبک و بهینه استفاده کن تا سرعت سایت پایین نیاد
فرمتهای مختلف فونت رو آپلود کن که توی همه مرورگرها درست نمایش داده بشه
حتماً قبل از تغییرات بکاپ بگیر
جمعبندی: فونت دلخواهت رو حرفهای به وودمارت اضافه کن!
تا اینجا یاد گرفتی چطور اعمال فونت سفارشی در قالب وودمارت رو انجام بدی، از انتخاب و آپلود فونت گرفته تا نوشتن CSS و استفاده از المنتور. حالا دیگه میتونی به سایتت یه استایل منحصربهفرد بدی که حسابی چشم کاربر رو بگیره.
سوالات متداول در مورد اعمال فونت سفارشی در قالب وودمارت
آیا با اعمال فونت سفارشی در قالب وودمارت سرعت سایت کاهش پیدا میکنه؟
اگه از فونتهای بهینه مثل woff2 استفاده کنی، تأثیر خیلی کمی داره.
میشه بدون کدنویسی فونت سفارشی اعمال کرد؟
بله، با افزونههایی مثل “Use Any Font” یا از طریق تنظیمات قالب.
آیا اعمال فونت سفارشی در قالب وودمارت روی موبایل هم کار میکنه؟
صددرصد! اگه به درستی آپلود و لود بشه، روی همه دستگاهها نمایش داده میشه.
امیدوارم این مقاله برات مفید بوده باشه.
خوشحال میشیم اگه نظری داری توی کامنتها برامون بنویسی 🙂
