web-dev-qa-db-fra.com

Comment puis-je utiliser la mise en cache du navigateur pour les polices Google?

J'ai testé mon site via Pingdom et j'ai obtenu ceci:

enter image description here

J'ai cherché mais je n'ai pas trouvé de solution à cela. Est-ce que quelqu'un sait comment je peux obtenir ce 14 à 100?

browser-cachegoogle-font-api
42
J82

Étant donné que vous ne pouvez pas contrôler les en-têtes de Google (y compris les en-têtes d'expiration), je ne vois qu'une solution: télécharger ces deux feuilles de style et ces polices sur votre propre serveur d'hébergement, modifier les balises HTML en conséquence.

Ensuite, vous pouvez définir les en-têtes d'expiration (ce que Pingdom a appelé "durée de vie") à votre guise.

Par exemple, ouvrez le premier lien :

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Téléchargez ce fichier .woff2 et enregistrez-le n’importe où sur votre serveur Web. Copiez et collez cette feuille de style dans l’un de vos propres fichiers CSS ou HTML. Modifiez le lien de fonts.gstatic.com vers votre nouvelle URL.

Google sert ces polices avec un délai d'expiration d'un jour. Vous pouvez facilement le définir à 30 jours maintenant.

25
Denis Mysenko

Pas une solution complète, mais vous pouvez améliorer la situation en combinant les deux demandes en une:

https://fonts.googleapis.com/css?family=Montserrat|Open+Sans

Je le fais pour deux polices sur n de mes sites et un score de 86 contre vos 14. Ce qui est important, c’est une véritable accélération, pas seulement un bidouillage pour réduire un score arbitraire.

47
Mark

Tout d’abord, il est important de clarifier la distinction entre la mise en cache des fichiers CSS de Google Fonts et les fichiers de polices réels. Selon le Google Fonts FAQs , leurs fichiers de polices sont réellement mis en cache pendant un an. Ce sont les fichiers CSS qui sont mis en cache pendant 24 heures:

Les demandes d'actifs CSS sont mises en cache pendant 1 jour. Cela nous permet de mettre à jour une feuille de style pour qu'elle pointe vers une nouvelle version d'un fichier de polices lorsqu'elle est mise à jour, et garantit que tous les sites Web utilisant des polices hébergées par l'API Google Fonts utiliseront la version la plus récente de chaque police dans les 24 heures suivant chaque publication. .

Les fichiers de polices eux-mêmes sont mis en cache pendant un an, ce qui a pour effet de rendre le Web plus rapide plus rapidement: lorsque des millions de sites Web génèrent tous des liens vers les mêmes polices, ils sont mis en cache après la visite du premier site et apparaissent instantanément sur tous les autres sites ultérieurement visités. . Nous mettons parfois à jour les fichiers de polices afin de réduire leur taille, d’augmenter la couverture linguistique et d’améliorer la qualité de leur conception. Le résultat est que les visiteurs du site Web envoient très peu de requêtes à Google: nous ne voyons qu'une requête CSS par famille de polices, par jour et par navigateur.

Je vous recommande de ne pas héberger vous-même ces fichiers CSS, car vous risquez de prendre du retard et de ne pas utiliser les dernières versions des polices lors de leur mise à jour.

Cependant, vous pouvez accélérer la requête CSS de plusieurs manières:

  1. Comme Mark l’a mentionné dans sa réponse, vous pouvez combiner vos deux polices Web en une seule demande: https://fonts.googleapis.com/css?family=Montserrat|Open+Sans
  2. Si vous n'utilisez que certains styles de l'une ou l'autre police, vous ne pouvez charger que les styles que vous utilisez réellement. Ici, nous chargeons tout Montserrat, mais seulement trois styles de Open Sans; normal (400), italique (400i) et gras (700): <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,400i,700" rel="stylesheet">
22
Paul-Hebert

Sachez que vous n'êtes pas autorisé à mettre en cache les fichiers CSS fournis par Google plus de 24 heures.

Je viens de dire ... selon les conditions générales de Google.

6
Orlando

Une solution de contournement assez simple consisterait à générer votre propre kit avec le générateur Webfont de Font Squirrel:

https://www.fontsquirrel.com/tools/webfont-generator

Pour pouvoir l'utiliser, vous devez télécharger les polices (Montserrat et Open Sans sont toutes deux disponibles sur Font Squirrel) et les ajouter au générateur. Ceci peut être utilisé pour ajouter une personnalisation supplémentaire. (Je l'ai souvent utilisé dans les cas où la police dans Google Webfonts ne comportait pas le sous-ensemble nécessaire pour la langue hongroise, même si elle était disponible dans la police d'origine.)

1
Scorchio

Je vois beaucoup de réponses vous recommandant de télécharger CSS et d’héberger vous-même. NE FAITES PAS cela car Google Fonts envoie des CSS différents pour chaque navigateur, en fonction de ses capacités.

Une solution rapide peut être Easy Fonts CDN qui héberge toutes les polices de Google, et fournit en plus une valeur ajoutée comme:

  1. Expiration longue pour les fichiers CSS. (Cela résoudra votre problème de en exploitant la mise en cache du navigateur )
  2. Noms de fichiers de polices faciles à déboguer.
  3. Classes de polices. Vous obtenez des classes CSS faciles à utiliser pour utiliser les polices en HTML, comme <div class="font-open-sans"></div>, <div class="font-lato"></div>, etc. Une référence complète est disponible ici .
  4. Une option pour un fichier de polices unique tout-en-un que vous pouvez inclure dans tous vos projets et oublier de rechercher dans le répertoire de Google Fonts encore et encore pour obtenir de nouvelles URL CSS.
  5. Enregistre 1 aspect DNS supplémentaire car Google CSS est hébergé sur fonts.googleapis.com et les fichiers de polices réels sont fournis par fonts.gstatic.com, tandis que les fichiers CSS et les polices d'Easy Fonts sont fournis par pagecdn.io. Si vous utilisez PageCDN pour d'autres ressources opensource ou si vous hébergez vos propres fichiers sur PageCDN, cela économisera deux recherches DNS , car tous les fichiers sont servis. sur un hôte unique utilisé pour d'autres fichiers également, et il n'y a pas de recherche DNS dédiée pour les polices.
  6. URL CSS cohérentes. CSS pour une famille de polices sera toujours chargé via une URL. Cela augmente la réutilisation du cache du navigateur. Les fichiers CSS de Google Fonts mélangent les noms de famille de polices et créent un nombre infini de fichiers CSS possibles. Cela réduit le partage de cache du navigateur entre les sites Web.

Si vous voulez utiliser uniquement les polices Open Sans et Montserrat, voici votre code:

<link href="https://pagecdn.io/lib/easyfonts/montserrat.css" rel="stylesheet" />
<link href="https://pagecdn.io/lib/easyfonts/open-sans.css" rel="stylesheet" />

Si vous souhaitez utiliser le fichier tout-en-un, utilisez:

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />
0
Hamid Sarfraz

Ce que j’ai eu à faire, c’est d’ajouter PHP comme post-processeur à mes fichiers CSS dans mon fichier .htaccess avec le code (j’utilise une extension de fichier .pcss personnalisée - juste pour le créer séparé de mes simples fichiers CSS):

<FilesMatch "\.pcss$">
SetHandler application/x-httpd-php
Header set Content-type "text/css"
</FilesMatch>

Ensuite, j'ai utilisé le code suivant dans mon fichier CSS pour obtenir et rappeler le contenu de l'URL de police que je voulais.

<?php
echo file_get_contents("https://fonts.googleapis.com/css?family={FONT}");
?>
0
Dom Webber