اطمینان حاصل کنید که متن در طول بارگذاری وب فونت قابل مشاهده است

فونت ها اغلب فایل های بزرگ با زمان بارگذاری کند هستند. برخی از مرورگرها متن را پنهان می کنند تا زمانی که فونت بارگیری شود و باعث فلش متن نامرئی (FOIT) می شود.

چگونه ممیزی فونت-نمایش Lighthouse شکست می خورد

Lighthouse هر URL فونتی را که ممکن است متن نامرئی چشمک بزند، علامت گذاری می کند:

تصویری از Lighthouse اطمینان حاصل کنید که متن در طول ممیزی بارگذاری وب فونت قابل مشاهده است

چگونه از نمایش متن نامرئی جلوگیری کنیم

font-display API نشان می دهد که چگونه یک فونت در صورت استفاده در یک سبک font-face نمایش داده می شود. مقادیر font-display زیر به مرورگر می‌گوید که اگر فونت سفارشی آماده نیست از فونت سیستمی استفاده کند:

  • swap
  • optional
  • fallback

مثال CSS 

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

نمونه فونت های گوگل

پارامتر &display=swap / &display=optional / &display=fallback به انتهای URL فونت Google خود اضافه کنید:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

چگونه از تغییر طرح بندی ناشی از فونت های معوق جلوگیری کنیم

نشان دادن موقت فونت سیستمی، FOIT را با فلاش متن بدون استایل (FOUT) جایگزین می کند. این امر FCP&LCP را با ارائه زودتر محتوا بهبود می‌بخشد، اما FOIT و FOUT هر دو تأثیر یکسانی بر CLS خواهند داشت وقتی فونت سفارشی جایگزین فونت موقت سیستم شود.

تاثیر CLS بارگیری فونت را می توان با استفاده از بارگذاری های اولیه در ارتباط با font-display: optional . با این حال، استفاده بیش از حد از پیش بارگذاری می تواند بر معیارهای بار تأثیر منفی بگذارد. توصیه می‌کنیم تست A/B را انجام دهید تا مطمئن شوید که فونت‌ها از قبل بارگذاری هیچ گونه رگرسیون عملکردی ایجاد نمی‌کنند.

راهنمایی مخصوص پشته

دروپال

هنگام تعریف فونت های سفارشی در موضوع خود @font-display را مشخص کنید.

مجنتو

هنگام تعریف فونت های سفارشی @font-display را مشخص کنید.

منابع