انتخاب فونت مناسب یکی از بخشهای مهم طراحی ظاهری یک سایت وردپرسی است. فونت فقط ظاهر نوشتهها را تغییر نمیدهد؛ انتخاب نادرست آن میتواند خوانایی متن، نمایش حروف فارسی و حتی سرعت بارگذاری صفحات را نیز تحت تأثیر قرار دهد.
در وردپرس روشهای مختلفی برای افزودن فونت وجود دارد. اگر از نسخههای جدید وردپرس و یک قالب بلوکی استفاده میکنید، ممکن است بتوانید بدون نوشتن حتی یک خط کد، فونت را از طریق Font Library اضافه کنید. در سایتهایی که با Elementor یا قالبهای کلاسیک ساخته شدهاند نیز روشهای دیگری مانند بارگذاری فونت از طریق تنظیمات قالب، CSS، functions.php یا فایلهای محلی وجود دارد.
برای مثال، همانطور که در یک کتاب چاپی انتخاب اندازه و نوع حروف میتواند خواندن یک متن طولانی را راحت یا خستهکننده کند، در یک سایت نیز فونت باید متناسب با نوع محتوا و مخاطب انتخاب شود.
در ادامه ۸ روش برای افزودن و ویرایش فونت در وردپرس را بررسی میکنیم تا بتوانید بر اساس ساختار سایت خود مناسبترین روش را انتخاب کنید.

قبل از افزودن فونت به وردپرس چه چیزهایی را بدانیم؟
قبل از اینکه فونت جدیدی روی سایت نصب کنید، چند نکته مهم را باید در نظر بگیرید.
اول اینکه مطمئن شوید مجوز استفاده از فونت را دارید. هر فونت رایگانی الزاماً برای استفاده تجاری یا قرار گرفتن روی وبسایت آزاد نیست.
دوم اینکه بهتر است فرمتهای مناسب وب را در اختیار داشته باشید. امروزه WOFF2 معمولاً انتخاب مناسبی برای استفاده وب است و در کنار آن میتوان در صورت نیاز فرمتهای دیگری مانند WOFF، TTF یا OTF را نیز در نظر گرفت. Font Library وردپرس نیز امکان آپلود فونتهایی با فرمتهای .ttf، .otf، .woff و .woff2 را فراهم میکند.
سوم اینکه لازم نیست برای یک سایت تعداد زیادی فونت و وزن مختلف نصب کنید. اگر سایت شما فقط به وزنهای معمول مانند 400 و 700 نیاز دارد، بارگذاری وزنهای متعدد میتواند منابع بیشتری مصرف کند.
روش اول: افزودن فونت با Font Library وردپرس
یکی از بهترین روشهای جدید برای افزودن فونت در وردپرس استفاده از Font Library است.
کتابخانه فونت از WordPress 6.5 به هسته وردپرس اضافه شد و امکان مدیریت فونتها را مستقیماً از محیط ویرایش سایت فراهم کرد. این قابلیت به شما اجازه میدهد فونتهای محلی را آپلود کنید و فونتهای نصبشده را مدیریت کنید.
در نسخههای جدید وردپرس، بسته به قالب و محیط مدیریتی، میتوانید از مسیر:
نمایش > فونتها
یا در برخی ساختارهای قدیمیتر از داخل:
نمایش > ویرایشگر > سبکها > تایپوگرافی > مدیریت فونتها
به بخش مدیریت فونت دسترسی داشته باشید. مستندات فعلی وردپرس مسیر Appearance > Fonts را برای Font Library معرفی میکند.
آپلود فونت در Font Library
پس از ورود به بخش فونتها، گزینه Upload را انتخاب کنید.
سپس فایل فونت را از کامپیوتر انتخاب کنید. فرمتهایی مانند:
WOFF2
WOFF
TTF
OTF
پشتیبانی میشوند.
بعد از نصب فونت، آن را در کتابخانه فونتهای سایت خواهید دید و میتوانید از آن برای تنظیم تایپوگرافی استفاده کنید.
مزیت این روش چیست؟
مهمترین مزیت Font Library این است که برای بسیاری از سایتهای مبتنی بر Block Theme، دیگر لازم نیست برای یک کار ساده سراغ کدنویسی بروید.
وردپرس فونت را مدیریت میکند و امکان نصب، فعالسازی و حذف فونتها را در اختیار شما قرار میدهد.
اگر سایت شما از قالب بلوکی و نسخه جدید وردپرس استفاده میکند، قبل از نصب افزونه یا ویرایش فایلهای قالب، ابتدا Font Library را بررسی کنید.
پیشنهاد مطالعه : جتپک (Jetpack) چیست؟
روش دوم: افزودن فونت از طریق Elementor
اگر سایت شما با Elementor ساخته شده باشد، میتوانید فونت سفارشی را از طریق امکانات خود Elementor اضافه کنید.
در نسخههایی که قابلیت Custom Fonts را ارائه میکنند، معمولاً میتوانید از بخش تنظیمات Elementor به قسمت فونتهای سفارشی بروید و فایلهای فونت را اضافه کنید.
ساختار دقیق منوها ممکن است با توجه به نسخه Elementor و نوع لایسنس متفاوت باشد؛ بنابراین اگر گزینه Custom Fonts را مشاهده نمیکنید، ابتدا نسخه Elementor و امکانات فعال سایت را بررسی کنید.
بعد از افزودن فونت، میتوانید در تنظیمات تایپوگرافی Elementor آن را برای بخشهایی مانند:
- عنوانها
- متن اصلی
- دکمهها
- منوها
- فرمها
انتخاب کنید.
یک نکته مهم در Elementor
اگر فونت را به Elementor اضافه کردهاید اما همچنان فونت قبلی نمایش داده میشود، کش Elementor، افزونه کش سایت و کش مرورگر را بررسی کنید.
همچنین ممکن است یک CSS دیگر فونت Elementor را Override کرده باشد.
روش سوم: افزودن فونت با CSS و @font-face
یکی از روشهای حرفهای و انعطافپذیر برای اضافه کردن فونت در وردپرس استفاده از @font-face در CSS است.
در این روش، ابتدا فایل فونت را روی سایت قرار میدهید و سپس در CSS به مرورگر اعلام میکنید که این فایل متعلق به چه خانواده فونتی است.
برای مثال:
@font-face {
font-family: 'MyPersianFont';
src: url('/wp-content/uploads/fonts/myfont.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
بعد میتوانید فونت را روی عناصر مورد نظر اعمال کنید:
body {
font-family: 'MyPersianFont', sans-serif;
}
اگر نسخه Bold فونت را نیز دارید، بهتر است آن را به عنوان وزن جداگانه تعریف کنید:
@font-face {
font-family: 'MyPersianFont';
src: url('/wp-content/uploads/fonts/myfont-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
سپس:
h2 {
font-family: 'MyPersianFont', sans-serif;
font-weight: 700;
}
این روش زمانی مفید است که بخواهید کنترل بیشتری روی نحوه نمایش فونت داشته باشید.
پیشنهاد مطالعه : ثبت نام در وردپرس فقط با ایمیلهای خاص چگونه انجام میشود؟
روش چهارم: افزودن فونت از طریق CSS سفارشی وردپرس
اگر فقط میخواهید فونت را روی بخشهایی از سایت اعمال کنید، ممکن است نیازی به ویرایش فایل قالب نداشته باشید.
در بسیاری از قالبها میتوانید از بخش سفارشیسازی > CSS اضافی استفاده کنید.
برای مثال، پس از اینکه فونت به شکل صحیح در سایت بارگذاری شد، میتوانید بنویسید:
body {
font-family: 'MyPersianFont', sans-serif;
}
h1,
h2,
h3 {
font-family: 'MyPersianFont', sans-serif;
}
این روش بیشتر برای تغییر نحوه نمایش فونت مناسب است؛ یعنی اگر فونت از قبل توسط قالب یا سیستم دیگری بارگذاری شده باشد، میتوانید با CSS آن را روی عناصر مختلف اعمال کنید.
اما اگر فایل فونت هنوز در سایت بارگذاری نشده باشد، صرفاً نوشتن:
font-family: 'MyPersianFont';
کافی نیست.
مرورگر باید بتواند فایل واقعی فونت را نیز پیدا و دریافت کند.
روش پنجم: افزودن فونت با functions.php
برای سایتهایی که نیاز به کنترل فنی بیشتری دارند، میتوان فایل CSS مربوط به فونت را از طریق functions.php قالب یا Child Theme بارگذاری کرد.
وردپرس برای بارگذاری صحیح فایلهای CSS تابع wp_enqueue_style() را در اختیار توسعهدهندگان قرار داده و استفاده از آن روش استاندارد بارگذاری stylesheet در وردپرس است.
برای مثال، اگر فایل فونت شما در یک فایل CSS به نام:
fonts.css
قرار داشته باشد، میتوانید آن را از طریق functions.php بارگذاری کنید:
function persiaweb_custom_fonts() {
wp_enqueue_style(
'persiaweb-custom-fonts',
get_stylesheet_directory_uri() . '/fonts/fonts.css',
array(),
null
);
}
add_action('wp_enqueue_scripts', 'persiaweb_custom_fonts');
هوک wp_enqueue_scripts برای اضافه کردن stylesheet و اسکریپتهایی که باید در بخش فرانتاند سایت بارگذاری شوند، در مستندات وردپرس به عنوان هوک مناسب معرفی شده است.
سپس داخل fonts.css میتوانید @font-face را قرار دهید.
چرا Child Theme اهمیت دارد؟
اگر کد را مستقیماً در فایل functions.php قالب اصلی قرار دهید، ممکن است با بهروزرسانی قالب تغییرات شما از بین بروند.
برای تغییرات سفارشی مهم، استفاده از Child Theme یا روشهای مدیریت کد سفارشی معمولاً انتخاب مطمئنتری است.
روش ششم: تعریف فونت در theme.json
اگر سایت با یک Block Theme ساخته شده باشد، میتوانید فونت را از طریق theme.json نیز مدیریت کنید.
WordPress برای Typography در theme.json امکان تعریف خانوادههای فونت و Web Fontها را فراهم کرده است. در مستندات توسعهدهندگان وردپرس، ویژگی fontFace برای تعریف فونتهای سفارشی و نگاشت آنها به CSS @font-face معرفی شده است.
یک نمونه ساده میتواند ساختاری شبیه این داشته باشد:
{
"version": 2,
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "My Persian Font",
"slug": "my-persian-font",
"fontFace": [
{
"fontFamily": "My Persian Font",
"fontWeight": "400",
"fontStyle": "normal",
"src": [
"file:./assets/fonts/my-font.woff2"
]
}
]
}
]
}
}
}
این روش برای توسعهدهندگان قالبهای بلوکی کاربرد بیشتری دارد و باعث میشود فونت به شکل ساختاریافتهتری در سیستم تایپوگرافی قالب تعریف شود.
اگر با theme.json آشنایی ندارید، بهتر است برای یک تغییر ساده در سایت موجود، بدون داشتن نسخه پشتیبان و محیط تست، مستقیماً این فایل را ویرایش نکنید.
پیشنهاد مطالعه : چرا استفاده از کپچا (CAPTCHA) در طراحی سایت حیاتی است؟
روش هفتم: بارگذاری فونت با افزونه
اگر نمیخواهید با فایلهای CSS، functions.php یا theme.json کار کنید، میتوانید از افزونههای مدیریت فونت استفاده کنید.
این افزونهها معمولاً رابطی در پیشخوان ایجاد میکنند تا بتوانید فایل فونت را آپلود کرده و خانواده فونت و وزنهای آن را مشخص کنید.
مزیت اصلی این روش، ساده بودن آن برای کاربران غیر فنی است.
اما یک نکته مهم وجود دارد: برای هر قابلیت سادهای نباید بلافاصله افزونه نصب کرد.
اگر قالب شما Font Library دارد یا Elementor امکان مدیریت فونت را در اختیار شما قرار میدهد، نصب افزونه اضافی ممکن است ضرورتی نداشته باشد.
همچنین قبل از نصب افزونه، سازگاری آن با نسخه فعلی وردپرس، آخرین بهروزرسانی و وضعیت پشتیبانی آن را بررسی کنید.
روش هشتم: افزودن فونت از طریق فایلهای قالب یا Child Theme
روش دیگر این است که فونت را مستقیماً در ساختار قالب قرار دهید.
برای مثال:
/wp-content/themes/your-child-theme/fonts/
سپس فایلهای فونت را در این پوشه قرار دهید و با CSS آنها را فراخوانی کنید.
ساختار فایل میتواند به این شکل باشد:
your-child-theme/
│
├── style.css
├── functions.php
└── fonts/
├── myfont.woff2
└── myfont-bold.woff2
سپس در CSS:
@font-face {
font-family: 'MyFont';
src: url('./fonts/myfont.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
اگر فونت در Child Theme قرار گرفته باشد، مدیریت آن سادهتر است و با تغییرات قالب اصلی، فایل فونت شما حذف نمیشود.
این روش برای سایتهایی که طراحی اختصاصی دارند یا توسعهدهنده به ساختار قالب دسترسی دارد، گزینه مناسبی است.
بهترین فرمت فونت برای وردپرس چیست؟
اگر برای استفاده در وب فونت تهیه میکنید، WOFF2 معمولاً یکی از انتخابهای اصلی است.
ممکن است در بعضی پروژهها برای سازگاری بیشتر، نسخه WOFF یا فرمتهای دیگر نیز وجود داشته باشد؛ اما لازم نیست بدون دلیل تمام فرمتهای ممکن را در سایت بارگذاری کنید.
برای مثال، اگر یک فونت فارسی چهار وزن داشته باشد و برای هر وزن چند فرمت مختلف روی سایت قرار دهید، تعداد فایلهایی که مرورگر باید مدیریت کند افزایش پیدا میکند.
بنابراین بهتر است فقط فرمتها و وزنهایی را نگه دارید که واقعاً به آنها نیاز دارید.
برای سایت فارسی چند وزن فونت لازم است؟
هیچ عدد ثابتی وجود ندارد، اما معمولاً نیازی نیست تمام وزنهای یک فونت را در سایت فعال کنید.
برای بسیاری از سایتها دو یا سه وزن کافی است؛ برای مثال:
400 → متن عادی
500 → متن نیمهبولد
700 → عنوان و متن برجسته
اگر فقط از وزن 400 و 700 استفاده میکنید، نیازی نیست وزنهای 100، 200، 300، 600، 800 و 900 را نیز بدون دلیل بارگذاری کنید.
این موضوع هم مدیریت فونت را سادهتر میکند و هم میتواند از بارگذاری فایلهای غیرضروری جلوگیری کند.
چگونه فونت پیشفرض وردپرس را تغییر دهیم؟
پس از نصب فونت، مرحله بعد اعمال فونت روی عناصر سایت است.
اگر از یک قالب بلوکی استفاده میکنید، میتوانید از تنظیمات Typography در Site Editor استفاده کنید.
در سایتهای Elementor نیز فونت را از تنظیمات Global Fonts یا تنظیمات تایپوگرافی عناصر انتخاب میکنید.
اگر روش CSS را انتخاب کرده باشید، میتوانید فونت را به عناصر مختلف اختصاص دهید:
body {
font-family: 'MyFont', sans-serif;
}
h1,
h2,
h3,
h4 {
font-family: 'MyFont', sans-serif;
}
button,
input,
textarea {
font-family: 'MyFont', sans-serif;
}
نکته آخر مهم است؛ زیرا گاهی مدیر سایت فونت را برای body تغییر میدهد اما دکمهها یا فرمها همچنان از فونت دیگری استفاده میکنند.
چرا بعد از تغییر فونت، فونت قبلی نمایش داده میشود؟
اگر فونت جدید را نصب کردهاید اما هنوز فونت قبلی نمایش داده میشود، چند عامل را بررسی کنید.
اول کش مرورگر را پاک کنید و صفحه را با حالت Private/Incognito باز کنید.
سپس کش افزونههای کش، CDN و در صورت وجود، کش سمت سرور را بررسی کنید.
در سایتهای Elementor نیز ممکن است فایلهای CSS تولیدشده نیاز به بازسازی داشته باشند.
از طرف دیگر، احتمال دارد CSS دیگری فونت شما را Override کرده باشد.
برای بررسی این موضوع میتوانید روی متن مورد نظر کلیک راست کرده و Inspect را باز کنید. سپس در بخش Styles ببینید کدام قانون CSS در نهایت font-family را تعیین کرده است.
اگر فونت فارسی بهدرستی نمایش داده نمیشود چه کنیم؟
گاهی فونت نصب شده اما حروف فارسی به شکل صحیح نمایش داده نمیشوند. در چنین شرایطی باید چند مورد را بررسی کنید.
اول مطمئن شوید فونت واقعاً از حروف فارسی پشتیبانی میکند. برخی فونتها فقط برای زبانهای لاتین طراحی شدهاند.
دوم مسیر فایل فونت را بررسی کنید. اگر مرورگر نتواند فایل را دریافت کند، فونت سفارشی اعمال نخواهد شد.
سوم کنسول مرورگر را بررسی کنید. خطاهایی مانند 404 برای فایل فونت یا خطاهای مربوط به CORS میتوانند سرنخ خوبی ارائه دهند.
همچنین مطمئن شوید وزن و سبک فونت به درستی تعریف شده است.
برای مثال اگر فقط فایل وزن 700 را دارید ولی CSS برای وزن 400 از همان فایل استفاده میکند، نتیجه ممکن است با چیزی که انتظار دارید متفاوت باشد.
آیا استفاده از فونت خارجی روی سرعت سایت تأثیر دارد؟
بله، میتواند تأثیر داشته باشد.
هر فایل فونتی که مرورگر باید دانلود کند، یک منبع اضافی برای بارگذاری صفحه محسوب میشود. بنابراین استفاده از تعداد زیاد فونت یا وزنهای غیرضروری میتواند حجم درخواستها را افزایش دهد.
برای همین بهتر است:
- فقط فونتهای مورد نیاز را بارگذاری کنید.
- وزنهای غیرضروری را حذف کنید.
- در صورت امکان از WOFF2 استفاده کنید.
- فونتهای حیاتی را به شکل مناسبی بارگذاری کنید.
- فونت را از منابع متعدد و غیرضروری دریافت نکنید.
استفاده از font-display: swap نیز میتواند رفتار نمایش متن هنگام بارگذاری فونت را بهبود دهد:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
پیشنهاد مطالعه : افزایش سرعت سایت وردپرس
فونت را از Google Fonts بگیریم یا روی هاست قرار دهیم؟
هر دو روش ممکن است، اما انتخاب آنها به شرایط سایت بستگی دارد.
Font Library وردپرس امکان نصب فونتهای Google Fonts را نیز فراهم میکند و فونت انتخابشده را برای استفاده سایت به صورت محلی میزبانی میکند.
در سایتهای فارسی که از فونتهای اختصاصی استفاده میکنند، معمولاً بارگذاری فایل فونت از هاست خود سایت گزینه طبیعیتری است؛ زیرا فونت اختصاصی شما ممکن است اصلاً در Google Fonts وجود نداشته باشد.
اگر فونت خارجی استفاده میکنید، شرایط مجوز و نحوه بارگذاری آن را نیز بررسی کنید.
آیا میتوان فونت را فقط برای یک بخش از سایت تغییر داد؟
بله.
لازم نیست تغییر فونت همیشه روی کل سایت اعمال شود.
برای مثال، فرض کنید یک فروشگاه اینترنتی میخواهید قیمت محصولات با فونت متفاوتی نمایش داده شود. میتوانید کلاس مربوط به قیمت را هدف قرار دهید:
.product-price {
font-family: 'MyFont', sans-serif;
}
یا اگر فقط عنوانهای یک بخش خاص باید تغییر کنند:
.special-section h2 {
font-family: 'MyFont', sans-serif;
}
این روش به شما اجازه میدهد بدون تغییر کل سایت، برای بخشهای خاص تایپوگرافی متفاوتی ایجاد کنید.
مشکلات رایج هنگام افزودن فونت در وردپرس
هنگام افزودن فونت ممکن است با چند مشکل رایج مواجه شوید.
فونت آپلود نمیشود
ممکن است فرمت فایل توسط سیستم آپلود یا تنظیمات سایت مجاز نباشد. در Font Library نسخههای جدید وردپرس، فرمتهای TTF، OTF، WOFF و WOFF2 پشتیبانی میشوند.
فونت آپلود شده ولی اعمال نمیشود
در این حالت مسیر فایل، CSS، نام font-family، وزن فونت و کش سایت را بررسی کنید.
فقط بعضی قسمتهای سایت فونت جدید دارند
احتمالاً CSS عناصر دیگر فونت متفاوتی تعیین کرده است. با Inspect Element میتوانید قانون CSS مؤثر را پیدا کنید.
فونت در دسکتاپ درست است ولی در موبایل نه
Responsive CSS و Media Queryها را بررسی کنید. ممکن است در نسخه موبایل، یک قانون CSS دیگر فونت را Override کند.
بعد از بهروزرسانی قالب فونت از بین رفته است
اگر فونت را مستقیماً داخل فایلهای قالب اصلی قرار داده باشید، ممکن است تغییرات شما با Update قالب از بین رفته باشد. استفاده از Child Theme یا روشهای مدیریت فونت داخلی وردپرس میتواند این مشکل را کاهش دهد.
کدام روش برای افزودن فونت در وردپرس مناسبتر است؟
انتخاب روش به ساختار سایت بستگی دارد.
| شرایط سایت | روش مناسب |
|---|---|
| قالب بلوکی و وردپرس جدید | Font Library |
| سایت ساختهشده با Elementor | Custom Fonts در Elementor |
| نیاز به کنترل CSS | @font-face |
| قالب اختصاصی | Child Theme + CSS |
| توسعه قالب بلوکی | theme.json |
| نیاز به مدیریت ساده بدون کدنویسی | Font Library یا افزونه |
| کنترل کامل توسط توسعهدهنده | فایل فونت + CSS + enqueue |
بنابراین نمیتوان یک روش را برای تمام سایتها بهترین گزینه دانست. اگر قابلیت داخلی وردپرس نیاز شما را برطرف میکند، معمولاً منطقی نیست صرفاً برای اضافه کردن یک فونت، چند افزونه و کد اضافی وارد پروژه کنید.
جمعبندی
برای افزودن و ویرایش فونت در وردپرس روشهای مختلفی وجود دارد و انتخاب روش مناسب به قالب، نسخه وردپرس و سطح دسترسی شما بستگی دارد.
در نسخههای جدید وردپرس، Font Library کار را برای بسیاری از کاربران ساده کرده و امکان آپلود و مدیریت فونتهای محلی را از داخل محیط وردپرس فراهم میکند.
اگر سایت با Elementor ساخته شده باشد، قابلیت Custom Fonts میتواند گزینه مناسبی باشد. برای کاربران فنیتر نیز روشهایی مانند @font-face، بارگذاری CSS با wp_enqueue_style()، استفاده از Child Theme و تعریف فونت در theme.json کنترل بیشتری ایجاد میکنند. وردپرس برای بارگذاری stylesheet استفاده از wp_enqueue_style() را روش استاندارد معرفی میکند و theme.json نیز امکان تعریف Web Fontهای سفارشی را دارد.
در نهایت، هنگام انتخاب فونت فقط به ظاهر آن توجه نکنید. مجوز استفاده، پشتیبانی از فارسی، تعداد وزنها، حجم فایل فونت و نحوه بارگذاری آن نیز اهمیت دارند. برای بیشتر سایتها بهتر است تعداد فونتها و وزنهای فعال محدود و هدفمند باشد تا هم مدیریت سایت سادهتر شود و هم منابع غیرضروری در هر صفحه بارگذاری نشوند.
اگر بعد از نصب فونت، تغییرات در سایت نمایش داده نمیشود، قبل از نصب افزونههای بیشتر، مسیر فایل فونت، font-family، وزن فونت، کش سایت و قوانین CSS را بررسی کنید؛ در بسیاری از موارد مشکل از خود فایل فونت نیست، بلکه از اعمال نشدن صحیح CSS یا کش قدیمی ناشی میشود.
پیشنهاد میکنیم برای اضافه کردن فونت به وردپرس با کارشناسان بخش تعمیرات و پشتیبانی سایت وردپرس در مجموعه پرشیا وب ارتباط برقرار کنید.