آموزش افزودن فونت به وردپرس (با افزونه، المنتور و کدنویسی)

تایپوگرافی و نوع فونت، اولین چیزی است که هویت بصری سایت شما را به کاربر منتقل می‌کند. استفاده از فونت‌های پیش‌فرض مثل Tahoma یا Arial در وب فارسی، نه تنها ظاهر سایت را قدیمی نشان می‌دهد، بلکه خوانایی محتوا را به شدت پایین می‌آورد. تغییر فونت یکی از سریع‌ترین روش‌ها برای ارتقای رابط کاربری (UI) است. در این مقاله، آموزش افزودن فونت به وردپرس را به کامل‌ترین شکل ممکن بررسی می‌کنیم تا بتوانید فونت‌های محبوبی مثل ایران‌سنس (IranSans)، یکان‌بخ (Yekan Bakh) یا فونت‌های رایگانی مثل وزیرمتن را روی سایت خود پیاده‌سازی کنید.

برای اضافه کردن فونت کاستوم (Custom Font) به سایت وردپرسی سه راه اصلی وجود دارد: استفاده از افزونه‌ها، تنظیمات داخلی صفحه‌سازها (مثل المنتور) و روش اصولی کدنویسی. در ادامه تمامی این روش‌ها را با جزئیات فنی و نکات مربوط به سرعت سایت بررسی می‌کنیم.

پیش‌نیاز ضروری: تبدیل فرمت فونت‌ها برای وب

قبل از اینکه سراغ نصب برویم، باید بدانید که نمی‌توانید از فایل‌های فونتی که روی ویندوز نصب می‌کنید (فقط فرمت TTF) مستقیماً و به تنهایی در وب‌سایت استفاده کنید. مرورگرهای مختلف از فرمت‌های متفاوتی پشتیبانی می‌کنند. برای اینکه فونت سایت شما در کروم، سافاری، گوشی‌های آیفون و اندروید به درستی نمایش داده شود، باید فونت شما در فرمت‌های استاندارد وب (Web Fonts) آماده باشد.

فرمت WOFF2: جدیدترین و فشرده‌ترین فرمت فونت وب. پشتیبانی عالی در مرورگرهای مدرن.
فرمت WOFF: فرمت استاندارد با پشتیبانی گسترده‌تر برای مرورگرهای کمی قدیمی‌تر.
فرمت TTF / OTF: به عنوان نسخه پشتیبان (Fallback) برای مرورگرهای بسیار قدیمی.

اگر فونت را خریداری کرده‌اید (مثل ایران‌سنس)، فروشنده پوشه‌ای به نام WebFonts شامل این فرمت‌ها به شما می‌دهد. اما اگر فقط فایل TTF را دارید، می‌توانید از سایت‌های رایگانی مثل Transfonter.org یا CloudConvert برای تبدیل فرمت‌ها استفاده کنید.

روش اول: افزودن فونت به وردپرس با کدنویسی (@font-face)

استانداردترین، سبک‌ترین و بهینه‌ترین روش برای تغییر فونت سایت، استفاده از کدهای CSS است. این روش هیچ افزونه اضافی به سایت شما تحمیل نمی‌کند و سرعت بارگذاری (Page Speed) را در بهترین حالت نگه می‌دارد.

مرحله ۱: آپلود فایل‌های فونت در هاست

ابتدا باید فایل‌های فونت (woff2, woff, ttf) را در هاست خود آپلود کنید. وارد کنترل پنل هاست (سی‌پنل یا دایرکت‌ادمین) شوید:

به مسیر wp-content/themes/your-theme-name بروید (به جای your-theme-name نام قالب فعال خود را انتخاب کنید. ترجیحاً چایلد تم).
یک پوشه جدید به نام fonts بسازید.
فایل‌های فونت خود (مثلاً vazirmatn.woff2) را داخل این پوشه آپلود کنید.

مرحله ۲: معرفی فونت به وردپرس با کدهای CSS

حالا وارد پیشخوان وردپرس شوید. از مسیر نمایش > سفارشی‌سازی > CSS اضافی (یا فایل style.css قالب فرزند) کدهای زیر را قرار دهید. دقت کنید که نام فایل‌ها باید دقیقاً مطابق چیزی باشد که در هاست آپلود کرده‌اید:


@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/vazirmatn.woff2') format('woff2'),
         url('fonts/vazirmatn.woff') format('woff'),
         url('fonts/vazirmatn.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

نکته مهم سرعت: دستور font-display: swap در کد بالا به مرورگر می‌گوید تا زمان لود شدن فونت اصلی، متن‌ها را با فونت پیش‌فرض سیستم نشان دهد. این کار از بروز خطای “Ensure text remains visible during webfont load” در ابزار جی‌تی‌متریکس و گوگل پیج‌اسپید جلوگیری می‌کند.

مرحله ۳: اعمال فونت روی تگ‌های سایت

حالا که فونت به سایت معرفی شد، باید به وردپرس بگوییم متن‌ها را با این فونت نمایش دهد. کافیست کد زیر را در ادامه کدهای قبلی قرار دهید:


body, p, h1, h2, h3, h4, h5, h6, a, span, div, li {
    font-family: 'Vazirmatn', sans-serif !important;
}

اکنون اگر سایت را رفرش کنید، فونت کل سایت شما تغییر کرده است!

روش دوم: تغییر فونت در المنتور (بدون نیاز به کد)

اگر سایت خود را با افزونه صفحه‌ساز المنتور پرو (Elementor Pro) طراحی کرده‌اید، نیازی به روش اول ندارید. المنتور یک سیستم مدیریت فونت داخلی بسیار قدرتمند دارد.

در پیشخوان وردپرس به مسیر المنتور > فونت‌های سفارشی بروید.
روی دکمه “افزودن جدید” کلیک کنید و نام فونت خود (مثلا YekanBakh) را وارد کنید.
روی “افزودن متغیر فونت” کلیک کنید.
حالا به سادگی فایل‌های WOFF2، WOFF و TTF را از طریق آپلودر وردپرس در فیلدهای مربوطه قرار دهید.
وزن فونت (مثلا 400 برای معمولی و 700 برای ضخیم) را انتخاب و تنظیمات را منتشر کنید.

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

روش سوم: معرفی بهترین افزونه‌های افزودن فونت به وردپرس

اگر تمایلی به دستکاری کدهای قالب ندارید و از صفحه‌سازهای ساده‌تر استفاده می‌کنید، افزونه‌ها کار شما را راحت می‌کنند. در اینجا دو مورد از بهترین و سبک‌ترین پلاگین‌ها را معرفی می‌کنیم:

۱. افزونه Use Any Font

این افزونه یکی از محبوب‌ترین ابزارها در مخزن وردپرس است. مزیت اصلی Use Any Font این است که نیازی به تبدیل فرمت‌ها توسط شما ندارد؛ کافیست فقط فایل TTF را آپلود کنید تا افزونه به صورت خودکار از طریق API اختصاصی خود، فرمت‌های WOFF و WOFF2 را برای وب تولید کند و روی سایت اعمال نماید.

۲. افزونه Custom Fonts

این افزونه که توسط تیم سازنده قالب Astra توسعه داده شده، بسیار سبک است و دقیقاً عملکردی مشابه سیستم فونت کاستوم المنتور دارد. شما فایل‌های فونت را آپلود می‌کنید و افزونه آن‌ها را به لیست فونت‌های قالب و ویرایشگر گوتنبرگ اضافه می‌کند. این افزونه با قالب‌های محبوبی مثل استرا، اوشن‌دبلیوپی و جنریت‌پرس سازگاری ۱۰۰ درصدی دارد.

رفع مشکلات رایج پس از تغییر فونت

گاهی اوقات با وجود انجام تمام مراحل، فونت سایت تغییر نمی‌کند. در این شرایط موارد زیر را بررسی کنید:

کش مرورگر و سرور: مهم‌ترین دلیل اعمال نشدن تغییرات است. کش مرورگر خود را با دکمه‌های Ctrl + F5 پاک کنید. همچنین اگر افزونه کش (مثل لایت‌اسپید یا راکت) دارید، کش سایت را کامل تخلیه کنید.
مسیردهی اشتباه در کدها: اگر از روش کدنویسی استفاده کرده‌اید، مطمئن شوید مسیر نوشته شده در قسمت url() دقیقاً به پوشه فونت‌ها در هاست اشاره می‌کند.
تداخل فونت قالب: برخی قالب‌های ایرانی تنظیمات فونت اختصاصی در پنل تنظیمات خود دارند. اولویت فونتِ تنظیمات قالب معمولاً از کدهای CSS شما بالاتر است. ابتدا باید فونت را از پنل قالب روی حالت پیش‌فرض (Default) قرار دهید.

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

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

آیا افزودن فونت دلخواه سرعت سایت وردپرسی را کم می‌کند؟

اگر فونت را در فرمت فشرده WOFF2 آپلود کنید و از دستور font-display: swap استفاده کنید، تاثیر منفی روی سرعت نخواهد داشت. با این حال پیشنهاد می‌کنیم حداکثر از ۲ یا ۳ وزن مختلف (مثلاً ضخیم و معمولی) استفاده کنید تا حجم دانلود برای کاربر کاهش یابد.

چرا در گوشی موبایل، فونت سایت تغییر نمی‌کند؟

این مشکل معمولاً به دلیل کش شدن فایل‌های CSS در مرورگر موبایل (مثل سافاری یا کروم اندروید) است. کش مرورگر موبایل خود را پاک کنید. دلیل دوم می‌تواند عدم قرار دادن شناسه !important در انتهای کدهای CSS شما برای بازنویسی فونت‌های پیش‌فرض موبایل باشد.

بین WOFF و TTF کدام را برای سایت آپلود کنم؟

شما باید فرمت WOFF و به ویژه WOFF2 را به عنوان فرمت‌های اصلی آپلود کنید. این فرمت‌ها منحصراً برای فضای وب فشرده‌سازی شده‌اند و حجم بسیار کمتری نسبت به فایل‌های TTF (که مخصوص ویندوز و نرم‌افزارها هستند) دارند.

چگونه یک فونت را فقط برای عنوان‌ها (H2 و H1) تغییر دهم؟

کافیست در فایل CSS سایت، کلاسی را مشخص کنید که فقط تگ‌های هدینگ را هدف قرار دهد. به عنوان مثال:
h1, h2, h3 { font-family: 'نام فونت جدید' !important; }

آیا می‌توانم از فونت‌های گوگل (Google Fonts) در سایت‌های ایرانی استفاده کنم؟

بله، اما توصیه نمی‌شود. بارگذاری مستقیم فونت از سرورهای گوگل باعث ریکوئست‌های خارجی (External Requests) شده و به دلیل محدودیت‌های اینترنت در ایران، ممکن است فونت با تاخیر لود شود. بهترین کار دانلود فونت از گوگل و آپلود مستقیم آن در هاست شخصی است.

چرا فونت‌ها در سایت به صورت مربع‌های توخالی نشان داده می‌شوند؟

نمایش کاراکترهای مربعی به معنای “گراف نشناخته” است. این یعنی فایل فونتی که روی هاست آپلود کرده‌اید، از کاراکترهای زبان فارسی پشتیبانی نمی‌کند یا فایل فونت در هنگام آپلود در هاست آسیب دیده است (Corrupted File).