Y compris le lien Google Web Fonts ou l'importation?

201

Quelle est la méthode préférée pour inclure des 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 l'importation 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

fonts webfonts google-webfonts kajo
la source
3
Vous voudrez peut-être également lire cette question avant d'utiliser les polices Google. selon le projet spécifique - ce n'est peut-être pas toujours le choix judicieux.
Obmerk Kronen

Réponses:

301

Pour 90% + des cas, vous voudrez probablement la <link>balise. En règle générale, vous voulez éviter les @importrègles car elles reportent le chargement de la ressource incluse jusqu'à ce que le fichier soit récupéré .. et si vous avez un processus de construction qui "aplatit" les @ import, vous créez un autre problème avec les polices Web : les fournisseurs dynamiques comme Google WebFonts proposent des versions des polices spécifiques à la plate-forme, donc si vous intégrez simplement le contenu, vous vous retrouverez avec des polices cassées sur certaines plates-formes.

Maintenant, pourquoi utiliseriez-vous le chargeur de polices Web? Si vous avez besoin d' un contrôle complet sur la façon dont les polices sont chargées. La plupart des navigateurs reporteront la peinture du contenu à l'écran jusqu'à ce que tout le CSS soit téléchargé et appliqué - cela évite le problème du «flash de contenu sans style». L'inconvénient est que vous pouvez avoir une pause et un délai supplémentaires 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 fondre après que le contenu original est peint à l'écran.

Encore une fois, le cas à 90% est la <link>balise: utilisez un bon CDN et les polices tomberont rapidement et encore plus probablement, seront servies hors du cache.

Pour plus d'informations et un aperçu détaillé de Google Web Fonts, regardez cette vidéo GDL

igrigorik
la source
1
"parce qu'ils reportent le chargement de la ressource incluse jusqu'à ce que le fichier soit récupéré" - n'est-ce pas une bonne raison d'utiliser @import? Parce que normalement, vous ne voulez pas voir le contenu tant que la police n'est pas chargée (pour éviter que la police scintille)
Alex
2
L'API Web Fonts est très utile lorsque vous travaillez avec HTML5 Canvas. Vous ne pouvez pas utiliser une police qui n'a pas fini de se charger avant de dessiner du texte avec elle, et bien sûr, une fois la police chargée, elle n'est pas automatiquement mise à jour. De même, l'API est nécessaire pour suivre la progression du chargement des ressources, par exemple dans un jeu.
rvighne le
16
Ces informations doivent figurer sur la page Google Web Fonts. Il vous présente simplement les trois options - et ne donne aucune indication utile sur celle à utiliser et quand.
Gal
5
Le didacticiel de mise en route de Google n'utilise que la <link>méthode, donc je suppose que c'est celle qu'ils recommandent de manière tacite
James Cushing
2
Vous pouvez également ajouter rel="preload"à la <link>balise, car la police sera chargée avant que le texte n'apparaisse. Voir 3perf.com/blog/link-rels
Elijah Mock
5

Utilisez le <link>fourni par Google car il y a un contrôle de version sur la police, mais juste au-dessus, utilisez la fonction de préconnexion de 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 <head></head>balise:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
Mark Cilia Vincenti
la source
Est-il exact que la préconnexion est un domaine complètement différent du lien de la feuille de style dans votre exemple? fonts.gstatic.comversusfonts.googleapis.com
BadHorsie
1
@BadHorsie, c'est tout l'intérêt. La feuille de style sur fonts.googleapis.com contient un lien vers une ressource sur fonts.gstatic.com. Vous dites au navigateur d'initier une connexion à ce dernier hôte afin qu'il se soit connecté ou ait commencé à se connecter au moment où il trouve le lien dans la feuille de style.
Mark Cilia Vincenti le
4

Si vous êtes préoccupé par le référencement (optimisation des moteurs de recherche) et les performances, il est bon d'utiliser la <link>balise car elle peut précharger la police.

Exemple:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.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;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.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;
}
</style>

Pour plus d'informations, lisez ceci: https://ashton.codes/preload-google-fonts-using-resource-hints/

Homard
la source