Principes de base de l'API Google Font - Astuces CSS

Lien vers les fichiers CSS

Vous effectuez essentiellement un lien direct vers les fichiers CSS sur Google.com. Grâce aux paramètres d'URL, vous spécifiez les polices que vous voulez et les variations de ces polices.

… 

Idée: vous pouvez éviter une demande réseau supplémentaire en ouvrant cette feuille de style et en copiant et collant les éléments @ font-face dans votre feuille de style principale. Mais méfiez-vous: Google fait des trucs de reniflage de User Agent pour parfois servir différentes choses à différents appareils selon les besoins. Vous n'en bénéficierez pas si cela est fait de cette façon.

CSS

Dans votre CSS, vous pouvez ensuite spécifier ces nouvelles polices par nom sur tout élément que vous souhaitez les utiliser.

body ( font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; )

FontLoader

Vous pouvez utiliser le JavaScript FontLoader au lieu de créer un lien vers le CSS. Il présente des avantages, comme le contrôle du Flash of Unstyled Text (FOUT), ainsi que des inconvénients, comme le fait que les polices ne se chargent pas pour les utilisateurs sans JavaScript.

 WebFont.load(( google: ( families: ('Cantarell') ) )); .wf-loading h1 ( visibility: hidden; ) .wf-active h1, .wf-inactive h1 ( visibility: visible; font-family: 'Cantarell'; ) 

Ces noms de classe, par exemple, .wf-loadingsont appliqués à l' élément. Remarquez donc que lorsque les polices se «chargent», vous pouvez utiliser ce nom de classe pour masquer le texte. Ensuite, quand ils sont affichés, rendez-les à nouveau visibles. C'est ainsi que FOUT est contrôlé.