web-dev-qa-db-fra.com

Comment réparer Assurez-vous que le texte reste visible pendant le chargement de la police Web

Bonjour, je suis confronté à ce problème dans google pagespeed. J'ai presque atteint la vitesse de mon site à 100, la seule chose qui reste est Ensure text remains visible during webfont load

J'utilise déjà font-display: swap; alors pourquoi cela ne résout-il pas mon problème.

voici ma police externe css

@font-face {
    font-display: swap;
      font-family: 'Miriam Libre';
      font-style: normal;
      font-weight: 400;
      src: local('Miriam Libre Regular'), local('MiriamLibre-Regular'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdTh798HsHwubBAqfkcBTL_fZ5P7.ttf) format('truetype');
    }
    @font-face {
    font-display: swap;
      font-family: 'Miriam Libre';
      font-style: normal;
      font-weight: 700;
      src: local('Miriam Libre Bold'), local('MiriamLibre-Bold'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdT-798HsHwubBAqfkcBTL_X3LbrQsq_.ttf) format('truetype');
    }

J'ai généré ce css en utilisant ces commandes

npx local-webfont https://fonts.googleapis.com/css?family=Miriam+Libre:400,7 /Users/admin/Documents/projects/font.css fallback

que j'ai obtenu de https://github.com/swissspidy/local-webfont

csswebfontsgoogle-pagespeedgoogle-fonts
5
leo Spacer

Vérifiez votre fichier CSS principal, y a-t-il du code CSS @ font-face? Sinon, ajoutez votre code ci-dessus à votre CSS principal ou à tout autre CSS utilisé pour votre page HTML. Vous n'avez pas besoin d'ajouter votre code à la page html.

Bien que votre code soit correct, il ne résoudra pas le problème s'il est installé sur la page html mais dans le fichier css, toujours aucun code font-display: swap;

Modifiez-le sur votre CSS et passez à la page HTML

1
Hans Ganteng