web-dev-qa-db-fra.com

Y compris le lien ou l'importation de polices Web Google?

Quelle est la méthode préférée pour inclure les polices Web Google dans une page?

  1. via la balise de lien?

    <link href = 'http: //fonts.googleapis.com/css? family = Judson: 400,400italic, 700' rel = 'stylesheet' type = 'text/css'>

  2. via import dans une feuille de style?

    @import url (http://fonts.googleapis.com/css?family=Kameron:400,700);

  3. ou utilisez le chargeur de polices web

    https://developers.google.com/webfonts/docs/webfont_loader

fontswebfontsgoogle-webfonts
147
kajo

Dans plus de 90% des cas, vous voudrez probablement la balise <link>. En règle générale, vous voulez éviter les règles @import car elles retardent le chargement de la ressource incluse jusqu'à ce que le fichier soit récupéré. Si vous utilisez un processus de construction qui "aplatit" celui de @ import, vous créez un autre problème avec Web. polices: les fournisseurs dynamiques tels que Google WebFonts proposent des versions de polices spécifiques à une plate-forme. Si vous insérez simplement le contenu dans le contenu, vous vous retrouverez avec des polices endommagées sur certaines plates-formes.

Maintenant, pourquoi voudriez-vous utiliser le chargeur de polices Web? Si vous avez besoin de complete, contrôlez le chargement des polices. La plupart des navigateurs retarderont l'affichage du contenu à l'écran jusqu'à ce que tout le code CSS soit téléchargé et appliqué - ceci évite le problème du "flash de contenu non style". L'inconvénient est que vous pouvez avoir une pause supplémentaire et attendre jusqu'à ce que le contenu soit visible. Avec le chargeur JS, vous pouvez définir comment et quand les polices deviennent visibles. Par exemple, vous pouvez même les insérer en fondu après que le contenu d'origine ait été peint à l'écran.

Encore une fois, la casse 90% correspond à la balise <link>: utilisez un bon CDN et les polices tomberont rapidement et, plus probablement encore, seront servies en dehors du cache.

Pour plus d'informations et un aperçu détaillé des polices Web de Google, consultez cette vidéo GDL video

241
igrigorik

Utilisez le <link> fourni par Google car il existe un contrôle de version sur la police, mais juste au-dessus, utilisez la fonction de préconnexion HTML5 pour demander aux navigateurs d'ouvrir une connexion TCP et de négocier SSL à l'avance avec fonts.gstatic.com. Voici un exemple, qui doit évidemment résider dans votre balise <head></head>:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
0
Mark Cilia Vincenti

Vous pouvez économiser du temps de demande

... si vous prenez du temps de codage supplémentaire.

Ce n'est pas grave, il suffit d'ouvrir le lien simplifié d'une ligne de Google:

   http://fonts.googleapis.com/css?family=Kameron:400,700

et voyez ce que cela vous donne:

/* latin */
@font-face {
  font-family: 'Kameron';
  font-style: normal;
  font-weight: 400;
  src: local('Kameron'), url(https://fonts.gstatic.com/s/kameron/v8/vm82dR7vXErQxuzngLk6Lg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Kameron';
  font-style: normal;
  font-weight: 700;
  src: local('Kameron Bold'), local('Kameron-Bold'), url(https://fonts.gstatic.com/s/kameron/v8/vm8zdR7vXErQxuzniAIfO-rpfQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Oui, ce ne sont que quelques autres demandes. Il est plus rapide de commencer directement avec ceux-ci - encore plus rapidement si vous téléchargez les fichiers de police sur votre propre serveur et ajoutez une URL localhost avant celle de Google. Je sais que je sais, nous aimons les CDN et les demandes parallèles, elles sont censées être plus rapides - mais essayez et voyez par vous-même.

Passons maintenant à la question initiale: ne pas @importer, ni <lien>, juste mettez ce code dans votre CSS global , c’est le meilleur choix pour votre serveur. Il ne nécessite aucune requête supplémentaire, ce n'est pas un déménagement séparé - il ne s'agit que d'une très légère augmentation de la taille du fichier, ce qui n'ajoutera pratiquement rien au temps de traitement d'une requête. Sera-ce beau à regarder? Non ... Mais nous espérons que votre site recevra beaucoup plus de demandes que de révisions :) Aidez donc le serveur, pas vous-même.

Globalement, je pense que cela vaut la peine de faire un effort supplémentaire.

La version en une ligne n'est pas conçue pour être efficace mais simple - pour les blogueurs qui veulent la solution la plus simple possible. Tu sais mieux.

0
dkellner