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

انتخاب فرمت مناسب برای فونت وب سایت

اولین چیزی که باید بدونی اینه که فونت مخصوص سایت یا همون Web Font با نسخه‌های دسکتاپ که مثلا توی نرم افزارهایی مثل ورد یا فتوشاپ استفاده می‌کنیم کاملا متفاوته و اگر از اون نسخه‌ها اشتباها استفاده کنی، سرعت لود سایتت پایین میاد. پس توی بخش اول این قضیه رو با هم مرور کنیم.

فرق فونت TTF و WOFF2 چیه؟

فرمت TTF همون فرمتی هست که توی نسخه دسکتاپ استفاده میشه و برای نرم‌افزارهایی مثل فتوشاپ قابل استفاده هست اما همین فونت‌ها نسخه‌های مخصوص وب دارن که از جهت حجم بهینه تر شدن و این فرمت WOFF2 هست.

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

فونت متغیر یا همون Variable Font چیه؟

هر فونت یه سری وزن‌های متفاوت داره که از ۱۰۰ تا ۹۰۰ رو شامل میشه و اسم‌هایی مثل light، regular، bold، black داره. هر کدوم از این وزن‌های فونت یه فایل مختص خودشون برای لود شدن دارن.

حالا اگه همه این‌ها توی یه فایل لود بشه اصطلاحا Variable Font هست علاوه بر اینکه عرض (Width) و زوایه‌های مختلف (Slant) مثل Italic رو هم شامل میشه. احتمالا توی یه سری از سایت‌ها دیدید که کنار اسم فونتشون یه VF نوشته شده که نشون میده Variable Font استفاده شده. 

مزیت‌های استفاده از Variable Font

1. حجم کمتری موقع لود سایت می‌گیره
   مثلا بجای ۹ تا فایل وزن‌های مختلف که هر کدوم ۴۰۰ کیلوبایت هست، یه فایل ۶۰۰ کیلو بایتی فقط لود می‌کنه
2. فقط یه فایل بجای چند فایل برای فونت ها لود میشه
   این تعداد ریکوئست‌هایی که سمت سرور می‌فرسته رو کم می‌کنه و از جهت سرعت بهینه تر هست

بارگذاری فونت در وردپرس

حالا که فهمیدیم فونت مخصوص سایت چی هست باید فایل اون رو مستقیما روی سرور خودمون آپلود کنیم. حتما وقتی یه فونتی رو دانلود یا خریداری می‌کنی توی پوشه‌ها یه چیزی مثل Web Font یا Variables وجود داره که بتونید فایل WOFF2 رو ازش بردارید. 

ساده‌ترین و امن‌ترین مسیر اینه که فونت رو توی پوشه‌ی uploads آپلود کنی. توی مسیری مثل public_html/wp-content/uploads یه پوشه می‌تونی درست کنی یا هر مسیر دیگه داخل این پوشه، اینطوری اگر قالب هم آپدیت بشه مشکلی برای فونت‌هات پیش نمیاد. مثلاً مسیر من این بود:

public_html/wp-content/uploads/2025/12/

تعریف فونت با @font-face

حالا که فونت آپلود شدن باید فونت رو با CSS به سایت معرفی کنی. کد زیر رو می‌تونی توی Additional CSS همون سفارشی سازی یا فایل style.css قرار بدی.

توصیه می‌کنم توی style.css قالب چایلد این رو قرار بدید چون در minify شدن و مسائل مربوط به کش سایت بهتر هست. مسیرش هم که در وردپرس می‌دونی اما نمایش > ویرایش فایل قالب یا Theme file editor هست. حتما از قالب چایلد استفاده کنید که توی آپدیت زحماتتون از بین نره.

@font-face {
  font-family: 'estedad';
  src: url('https://peymanfarahani.ir/wp-content/uploads/2025/12/Estedad-FD[KSHD,wght].woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

• توی این کدها جلوی font-family اسم فونت نوشته شده و به حروف بزرگ و کوچیک بودنش دقت کنید. هر جای سایت خواستید استایل بدید فقط کافیه دیگه از اسم اون فونت استفاده کنید.

• یه ارور توی Page Speed Insights داریم با عنوان Ensure text remains visible during webfont load که وقتی شما از font-display: swap استفاده می‌کنید برای تعریف فونت این ارور برطرف میشه. چون این ویژگی باعث میشه متن سایت با فونت سیستم لود بشه و بعد از لود شدن فونت اصلی جاشو بگیره و اون تاخیری که بعضا فونت بصورت سفید رنگ منتشر میشه و بهش Flash of Invisible Text میگن ایجاد نشه.
  

• اگر دو یا چند تا فونت هم روی سایت استفاده می‌کنید، همین طور آپلود کنید و با مشابه همین کد تعریفش کنید. من خودم معمولا بیشتر از ۲ تا فونت روی سایت استفاده نمی‌کنم که سنگین نشه.
  

ست کردن فونت برای تیتر و متن

حالا که فونت‌ها رو برای برای سایت تعریف کنیم باید مشخص کنیم که چه المان‌هایی از اون فونت استفاده کنه. پس توی همون style.css باید اون المان‌ها رو معرفی کنیم. مثلا من توی سایتم گفتم هدینگ‌ها یا همون عنوان‌ها از فونت پینار استفاده کنن و متن‌ها و سایر المان‌ها از فونت استعداد. شما اگر یه فونت داشته باشید می‌تونید جفنش رو یکی تعریف کنید.

body,
button,
input,
select,
textarea {
  font-family: 'estedad' !important;
}


h1, h2, h3, h4, h5, h6 {
  font-family: 'pinar' !important;
}

فعال‌سازی Preload برای فونت‌ها

اینجا اون بخش طلایی‌ هست که واقعاً روی LCP و FCP اثر می‌ذاره. اگر فونت رو Preload نکنی، مرورگر معمولاً دیر سراغش می‌ره مخصوصاً اگه توی فایل CSS تعریف شده باشه و توی Page Speed Insights ارور font not preloaded رو میگیری.

با Preload به مرورگر می‌گیم این فونت مهمه؛ بنابراین هم‌زمان با بقیه‌ی منابع اصلی صفحه شروع می‌کنه به دانلودش و وقتی CSS بهش رسید، فونت عملاً آماده است.

برای همین، این تکه‌کد PHP رو به فایل functions.php قالب ( ترجیحا قالب چایلد) اضافه کن:

function pf_preload_fonts() {
    ?>
    <link rel="preload" href="https://peymanfarahani.ir/wp-content/uploads/2025/12/Estedad-FD[KSHD,wght].woff2" as="font" type="font/woff2" crossorigin>
    <?php
}
add_action( 'wp_head', 'pf_preload_fonts' );

در عمل پریلود شدن فونت باید توی wp-head سایت انجام بشه اما چون ممکن هست که بهش دسترسی نداشته باشید یا توی قالب چایلد پیداش نکنید ما از functions.php استفاه می‌کنیم و از این طریق به wp-head سایت تزریقش می‌کنیم. 

چک کردن Preload در مرورگر

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

1. مرورگر Chrome رو باز کن
2. برو به DevTools → Network
3. صفحه رو ریفرش کن
4. فیلتر font رو بزن

در ستون Initiator اگر داره از css مستقیم لود میشه یا افزونه کش مثل litespeed یا rocket اینطوری متوجه میشی که پریلود نشده اما اگر مثل تصویر زیر مستقیم داره از پوشه ای که فونت رو آپلود کردی می‌گیره یعنی فونت به درستی پریلود شده.

هماهنگی فونت‌ها با افزونه کش

وقتی از افزونه‌ی LiteSpeed Cache استفاده می‌کنی، بعضی ویژگی‌ها مثل Combine CSS یا Remove Unused CSS (UCSS) ممکنه ترتیب لود شدن فایل‌ها رو تغییر بدن.

در حالت عادی این مشکلی برای فونت‌ها ایجاد نمی‌کنه، اما اگه فونت‌هات رو به‌صورت دستی Preload کرده باشی (مثل همین کاری که با هم کردیم) لازمه مطمئن شی که افزونه کش اون لینک‌ها رو دست‌کاری نمی‌کنه.

در واقع نیازی نیست تنظیم خاصی برای فونت انجام بدی، فقط نکات زیر رو بدونی کافیه:

• Preload فونت‌ها رو توی functions.php نگه دار مثل کاری که کردیم
  افزونه‌های کش به‌صورت پیش‌فرض به <link rel=”preload”> کاری ندارن
• اگر Combine CSS یا UCSS فعاله، باید حتما تست بگیری
  بعضی وقت‌ها وقتی این دو گزینه روشن باشن، فونت دیرتر درخواست داده میشه و Page Speed Insights دوباره ارور Preload key requests میده. در این صورت می‌تونی مسیر فونت‌هات رو از Combine یا UCSS Exclude کنی.
• فشرده‌سازی Gzip  خودش فعاله
  نیازی نیست فونت‌ها رو دستی optimize یا minify کنی؛ افزونه‌های کش مثل LiteSpeed یا Rocket خودش فایل‌های WOFF2 رو فشرده‌شده می‌فرسته

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

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

مشکل تعریف فونت در المنتور 

المنتور یه بخش داره که می‌تونید فونت رو تعریف کنید، حالا چه بخواید استاتیک وزن‌ها رو تعریف کنید و چه بخواید Variable باشه. اما توی المنتور برای تعریف فونت Variable یه محدودیتی وجود داره و فعلا فقط اجازه میده فرمت TTF رو تعریف کنید که خب نسبت به فرمت WOFF2 تقریبا ۴۰ تا ۵۰ درصد سنگین‌تر هست. 

اگر توی المنتور فونت رو تعریف کنید برای ویژگی Swap چالش دارید و توی پریلود کردن فونت‌ها هم ممکن هست توی سورس لود فونت به مشکل بخورید. پس در یه جمع بندی کوتاه بهتر هست که با روشی که گفتم فونت‌ها رو تعریف کنید و از ویژگی فونت سفارشی المنتور استفاده نکنید.

مشکل تعریف فونت در قالب المنتور 

اگر قالب سایت خودتون رو با المنتور طراحی کردید یه بخش تنظیمات سایت دارید که می‌تونید انواع رنگ و فونت‌ها رو مشخص کنید. توی این کیت اگر بصورت مستقیم مثل روش من فونت رو لود کرده باشید نیازی به تعریف فونت نیست چون با CSS برای هدینگ‌ها و سایر موارد بصورت کد تعریف‌شون کردیم. 

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

و یه اشتباه مهم که نباید بکنید این هست که بعضا اسم فونت رو این گزینه که داخل تصویر مشخص شده قرار می‌دن که اگر فونتی پیدا نشد یه فونت پیش‌فرض وجود داشته باشه. همین کار باعث میشه یه ارور داخل Page Speed Insights بگیرید و کلی باید دنبالش بگردید که چرا فلان فونت من داره ارور می‌گیره. پس این گزینه حتما باید خالی بمونه.

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

مشکل لود شدن فونت‌های گوگل

توی یه آموزش ویدئویی بصورت کامل نحوه و دلیل غیرفعال کردن لود شدن فونت‌های گوگل از CDN رو گفتم و روش Self-Host کردن هر فونتی که از گوگل لازم دارید هم گفتم که توصیه می‌کنم حتما ببینید.

اما اگر از المنتور استفاده می‌کنید در تنظیمات المنتور > تنظیمات > پیشرفته حتما گزینه فونت‌های گوگل رو غیرفعال کنید و به روش گفته شده در ویدئو فونت گوگل رو لود کنید و با همین روش گفته شده در این آموزش اون رو swap و preload کنید.