آموزش افزودن فونت فارسی به Slider Revolution

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

افزودن فونت فارسی به افزونه Revolution Slider

در Slider Revolution 7، بهتره فونت رو از پنل اختصاصی فونت‌های سفارشی اضافه کنید. وارد پیشخوان افزونه بشید، بخش Settings رو باز کنید و از مسیر Fonts وارد Custom Fonts بشید. این بخش برای اضافه‌کردن فونتیه که فایلش رو خودتون در اختیار دارید.

حالا فایل فونت رو انتخاب و آپلود کنید. افزونه از فرمت‌هایی مثل WOFF2، WOFF، TTF و OTF پشتیبانی می‌کنه و کد لازم برای معرفی فونت رو می‌سازه. اگه چند وزن از یک فونت دارید، فایل هر وزن رو جداگانه اضافه کنید تا بعداً بتونید وزن مناسب هر متن رو انتخاب کنید.

بعد از اضافه‌شدن فونت، ماژول یا اسلاید موردنظرتون رو در Design Mode باز کنید. روی لایه متنی کلیک کنید و از بخش Style وارد تنظیمات Text بشید. حالا نام فونتی که اضافه کردید از فهرست Font قابل انتخابه.

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

در پایان، تغییرات ماژول رو ذخیره کنید.

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

پیدا کردن نام دقیق فونت برای جایگذاری در CSS

اگه نام دقیق فونت رو نمی‌دونید، صفحه‌ای از سایتتون رو باز کنید که همون فونت رو درست نشون می‌ده. روی متن راست‌کلیک کنید و گزینه Inspect رو بزنید. بعد در تب Computed، عبارت font-family رو پیدا کنید و نام خانواده فونت رو دقیقاً همون‌طور که نمایش داده شده کپی کنید. Inspect ابزار بررسی کد و ظاهر صفحه در مرورگره و به فایل‌های سایتتون تغییری نمی‌ده.

استفاده از وزن‌های مختلف فونت مثل Bold و Light در اسلایدها

برای اینکه تیتر و توضیحات اسلاید از هم مشخص باشن، می‌تونید وزن‌های متفاوت فونت رو به کار ببرید. مثلاً وزن Bold برای تیتر و Regular یا Light برای متن توضیح مناسب‌تره. اول فایل جداگانه هر وزن، مثل فایل WOFF2 مربوط به وزن ضخیم، رو در بخش Custom Fonts اضافه کنید. بعد لایه متنی رو انتخاب کنید و وزن موردنظرتون رو از تنظیمات متن در پنل Style بذارید.

اگه فونت رو با CSS روی لایه می‌ذارید، برای تیتر ضخیم معمولاً وزن ۷۰۰ و برای نوشته سبک‌تر وزن ۳۰۰ انتخاب می‌شه؛ البته فایل همون وزن باید واقعاً روی سایت بارگذاری شده باشه. نمونه CSS یک تیتر ضخیم به این شکله:

font-family: IRANSans; font-weight: 700;

این تفاوت وزن کمک می‌کنه پیام اصلی اسلاید زودتر دیده بشه و متن‌های فرعی هم خوانا بمونن. مقدار وزن رو براساس فایل‌هایی بذارید که برای فونت خودتون دارید.

نکات امنیتی و سرعت بارگذاری هنگام استفاده از فونت سفارشی

فونت سفارشی می‌تونه ظاهر اسلاید رو خیلی بهتر کنه، ولی فایل‌های زیاد یا سنگین سرعت بارگذاری رو پایین میارن. بهتره تا جای ممکن از WOFF2 استفاده کنید و فقط وزن‌هایی رو بارگذاری کنید که واقعاً لازم دارید. ویژگی font-display: swap; هم باعث می‌شه تا قبل از آماده‌شدن فونت اصلی، متن با یک فونت جایگزین دیده بشه. این کار جلوی مخفی‌ماندن نوشته رو می‌گیره و برای سئو و تجربه کاربری بهتره. راهنمای رفع خطای نمایش متن هنگام بارگذاری فونت هم جزئیات بیشتری درباره این موضوع داره.

رفع مشکل به‌هم‌ریختگی فونت در حالت موبایل

اگه فونت در دسکتاپ درسته ولی در موبایل به Arial یا Tahoma برمی‌گرده، اول حالت موبایل رو در ویرایشگر ماژول باز کنید. Breakpoint یعنی اندازه‌ای که چیدمان در اون برای موبایل یا تبلت تغییر می‌کنه. در هر Breakpoint، لایه متن و تنظیمات اندازه و مقیاس اون رو بررسی کنید تا مطمئن بشید فونت درست روی همون لایه انتخاب شده.

بعد به تنظیمات فونت سفارشی برگردید و محل بارگذاری اون رو بررسی کنید. فونت باید برای Editor & Live در دسترس باشه تا هم داخل ویرایشگر و هم در صفحه واقعی سایت نمایش داده بشه. نام خانواده فونت و فایل وزن انتخابی رو هم دوباره چک کنید؛ مثلاً اگه وزن ۷۰۰ رو انتخاب کردید، فایل مربوط به همین وزن باید بارگذاری شده باشه.

اگه از روش CSS استفاده می‌کنید، نام فونت باید دقیق و بدون اشتباه نوشته بشه؛ برای نمونه:

font-family: IRANSans;

اگه مشکل ادامه داشت، ابزار Inspect مرورگر رو باز کنید و در تب Network دنبال خطای 404 بگردید. خطای 404 یعنی مرورگر فایل فونت رو در آدرس تعیین‌شده پیدا نکرده. دسترسی فایل CSS و خود فایل فونت رو هم بررسی کنید. این بررسی‌ها معمولاً مشخص می‌کنن مشکل از مسیر اشتباه فایل، نام ناهماهنگ خانواده فونت یا بارگذاری‌نشدن وزن موردنیازه.

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

برای افزودن فونت فارسی به افزونه Revolution Slider، اول فایل فونت و وزن‌های لازم رو از بخش Custom Fonts اضافه کنید. بعد لایه متنی رو باز کنید و فونت رو از پنل Style روی اون بذارید. روش CSS هم برای فونتی که از قبل روی سایت نصب شده کاربرد داره، ولی برای شروع، پنل اختصاصی فونت افزونه مسیر ساده‌تریه.

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

تیم تولید محتوا

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