Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van het weblettertype

Lettertypen zijn vaak grote bestanden met trage laadtijden. Sommige browsers verbergen tekst totdat het lettertype geladen is, waardoor er een flits van onzichtbare tekst (FOIT) ontstaat.

Hoe de Lighthouse-lettertypeweergave-audit mislukt

Lighthouse markeert alle lettertype-URL's die onzichtbare tekst kunnen laten zien:

Een screenshot van de Lighthouse Ensure-tekst blijft zichtbaar tijdens de controle van het laden van webfonts

Hoe u kunt voorkomen dat onzichtbare tekst wordt weergegeven

De font-display API geeft aan hoe een lettertype wordt weergegeven wanneer het binnen een font-face wordt gebruikt. De volgende font-display waarden vertellen de browser om een ​​systeemlettertype te gebruiken als het aangepaste lettertype niet beschikbaar is:

  • swap
  • optional
  • fallback

CSS-voorbeeld 

@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;
}

Google Fonts-voorbeeld

Voeg de &display=swap / &display=optional / &display=fallback toe aan het einde van uw Google Fonts-URL:

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

Hoe u lay-outverschuivingen door uitgestelde lettertypen kunt voorkomen

Het tijdelijk weergeven van een systeemlettertype vervangt een FOIT door een flits van onopgemaakte tekst (FOUT). Dit verbetert FCP&LCP door de content sneller weer te geven, maar FOIT en FOUT hebben beide dezelfde impact op CLS wanneer het aangepaste lettertype het tijdelijke systeemlettertype vervangt.

De impact van het laden van lettertypen op de CLS kan worden beperkt door preloads te gebruiken in combinatie met font-display: optional . Overmatig gebruik van preloads kan echter een negatieve invloed hebben op de laadstatistieken. We raden aan A/B-tests uit te voeren om te garanderen dat het preloaden van lettertypen geen prestatieverslechtering veroorzaakt.

Stapelspecifieke begeleiding

Drupal

Geef @font-display op wanneer u aangepaste lettertypen in uw thema definieert.

Magento

Geef @font-display op wanneer u aangepaste lettertypen definieert .

Bronnen