اگر از فونت‌های سفارشی (Custom Fonts) در المنتور استفاده می‌کنید، احتمالاً در گزارش Pagespeed Insights با خطای زیر مواجه شده‌اید:

Ensure text remains visible during webfont load

این خطا معمولا به این دلیل است که مرورگر تا زمان دانلود کامل فونت، متن را نمایش نمی‌دهد و کاربر چند لحظه با صفحه‌ای مواجه می‌شود که بخشی از متن‌های آن نامرئی هستند.
خبر خوب اینه که اومدیم که سریع این مشکل رو حلش کنیم. همراه مسترباینری باشید 🙂

قبل ارائه راه حل خیلی سریع اشاره کنیم که اصلا font-display چی هست؟

Font Display چیست؟

ویژگی font-display مشخص می‌کند مرورگر هنگام دانلود فونت چه رفتاری داشته باشد.
به زبان ساده:
آیا متن را مخفی کند؟
آیا فونت جایگزین نمایش دهد؟
آیا منتظر دانلود فونت بماند؟
همه این رفتارها توسط همین ویژگی کنترل می‌شوند.

بهترین مقدار برای Font Display چیست؟

در اکثر سایت‌های وردپرسی مقدار زیر بهترین انتخاب است:

font-display: swap;

با این تنظیم:
متن بلافاصله با فونت پیش‌فرض سیستم نمایش داده می‌شود.
پس از دانلود فونت اصلی، مرورگر آن را جایگزین می‌کند.
کاربر هیچ‌وقت متن نامرئی مشاهده نمی‌کند.

در نتیجه:
✅ تجربه کاربری بهتر می‌شود.
✅ سرعت سایت افزایش پیدا می‌کند.
✅ امتیاز Core Web Vitals بهبود پیدا می‌کند.

المنتور به صورت پیش‌فرض چه مقداری استفاده می‌کند؟

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

font-display: auto;

استفاده می‌کند.
در عمل این مقدار کنترل رفتار را به مرورگر واگذار می‌کند و گزینه مناسبی برای بهینه‌سازی سرعت نیست!

فعالسازی Font Display Swap در المنتور

کد زیر را داخل فایل functions.php قالب فرزند (Child Theme) یا افزونه اختصاصی سایت خود قرار دهید:

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
return 'swap';
}, 10, 3 );

این فیلتر باعث می‌شود تمام فونت‌های سفارشی المنتور با مقدار swap تولید شوند.

نکته مهم: پس از افزودن کد باید فایل‌های CSS المنتور را مجددا تولید کنید. مسیر:

Elementor → Tools → Regenerate Files

سپس کش سایت، CDN و مرورگر را پاک کنید. در غیر این صورت ممکن است تغییرات اعمال نشوند.

چگونه مطمئن شویم تنظیم اعمال شده است؟

سورس صفحه را بررسی کنید. باید چیزی مشابه زیر مشاهده کنید:

@font-face {
font-family: "IRANYekan";
src: url("font.woff2");
font-display: swap;
}

اگر مقدار swap نمایش داده شود یعنی تنظیم با موفقیت اعمال شده است.
به یاد داشته باشید به جای swap از block، fallback یا سایر مقادیر هم میتونید استفاده کنید. پیشنهاد ما استفاده از همون swap هست.
موفق باشید 🙂