Quelle est la méthode préférée pour inclure des polices Web Google dans une page?
via la balise de lien?
<link href = 'http: //fonts.googleapis.com/css? family = Judson: 400,400italic, 700' rel = 'stylesheet' type = 'text / css'>
via l'importation dans une feuille de style?
@import url (http://fonts.googleapis.com/css?family=Kameron:400,700);
ou utilisez le chargeur de polices Web
Réponses:
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
<link>méthode, donc je suppose que c'est celle qu'ils recommandent de manière tacite
rel="preload"à la <link>balise, car la police sera chargée avant que le texte n'apparaisse. Voir 3perf.com/blog/link-rels
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">
fonts.gstatic.comversusfonts.googleapis.com
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/