Y compris le lien ou l’importation des fonts Google Web Fonts?

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

  1. via la balise de lien?

       
  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 fonts Web

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

Pour 90% ou plus des cas, vous voudrez probablement la . En règle générale, vous voulez éviter les règles @import car elles @import le chargement de la ressource incluse jusqu’à ce que le fichier soit récupéré. Si vous avez un processus de génération qui “aplatit” le fichier @, vous créez Webfonts: les fournisseurs dynamics tels que Google WebFonts servent des versions spécifiques aux plates-formes des fonts, donc si vous intégrez simplement le contenu, vous vous retrouverez avec des fonts cassées sur certaines plates-formes.

Maintenant, pourquoi utiliseriez-vous le chargeur de fonts Web? Si vous avez besoin d’ un contrôle complet sur la façon dont les fonts sont chargées. La plupart des navigateurs retarderont l’affichage du contenu sur l’écran jusqu’à ce que tout le CSS soit téléchargé et appliqué – ceci évite le problème de “flash de contenu non décrypté”. 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 quand et comment les fonts sont visibles. Par exemple, vous pouvez même les afficher après que le contenu original a été peint à l’écran.

Encore une fois, la balise 90% correspond à la : utilisez un bon CDN et les fonts disparaîtront rapidement et seront probablement diffusées en dehors du cache.

Pour plus d’informations et un aperçu détaillé des fonts Google Web Fonts, consultez cette vidéo GDL: https://www.youtube.com/watch?v=sqesm0euf9M