Lors de la première publication de Google Web Fonts, nous avons rédigé une procédure pas à pas. Depuis lors, le service a été complètement revu et il est grand temps de procéder à une procédure complète.
Rejoignez-nous dès le début et discutez de ce qu'est le service Google Web Fonts et de la façon de l'activer dès aujourd'hui sur votre site. Donnez-nous quelques minutes de votre temps et nous vous ouvrirons le monde impressionnant des superbes polices Web gratuites.
Pourquoi Google Web Fonts?
Il était une fois, le Web rempli de polices standard ennuyeuses. Afin de garantir la compatibilité avec le plus grand nombre d'utilisateurs, les concepteurs Web ont été contraints de limiter leurs choix de polices de texte en direct aux polices de caractères couramment trouvées sur la plupart des ordinateurs.
«L’octroi de licences de polices peut être un véritable gâchis. Il n’est donc pas toujours judicieux d’intégrer directement des polices aléatoires dans une page Web.Ce n’était pas la pire chose au monde pour des raisons de cohérence et de lisibilité, mais cela limitait réellement la créativité typographique du Web dans son ensemble. Avec CSS3, la plupart des navigateurs ont commencé à prendre en charge @ font-face, un moyen de fournir des polices personnalisées à une page Web. Malheureusement, les licences de polices peuvent être un véritable gâchis, alors incorporer directement des polices aléatoires dans une page Web n’est pas toujours une bonne idée.
Services de polices Web
En guise de solution, un certain nombre de services de polices Web @ font-face ont été créés, dont le meilleur et le plus célèbre est probablement Typekit. Typekit avait une belle solution: parcourez leur vaste bibliothèque de polices, puis copiez et collez du code pour les implémenter sur votre site.
Typekit avait une belle solution: parcourez leur vaste bibliothèque de polices, puis copiez et collez du code pour les implémenter sur votre site. ?Le seul problème avec des services comme celui-ci est que la structure de coûts, de 49 à 99 USD si vous voulez plus de deux sites, interdit à de nombreux concepteurs de les utiliser. Google est venu et a fait ce qu'il a toujours fait: prendre un service premium et le proposer gratuitement.
La qualité et la variété des caractères que vous trouverez sur des services premium tels que Typekit sont naturellement bien meilleures que celles que vous pouvez obtenir gratuitement, mais si elles ne font pas partie du budget, Google Web Fonts est votre meilleur choix.
Le résultat final
En voici l'essentiel: Google Web Fonts est un moyen totalement gratuit et extrêmement simple d'implémenter des polices non standard sur votre site Web de manière correctement licenciée et largement prise en charge.
Rencontrez les polices Web de Google
Maintenant que vous avez compris l'idée, il est temps d'aller voir la page des polices Web de Google.
Ce que vous voyez ici ressemble beaucoup à une application de polices standard. Il s'agit en gros d'une liste énorme de toutes les polices disponibles avec diverses fonctionnalités de prévisualisation et de filtrage. Notez que, au moment de la rédaction de ce document, il existe 506 familles de polices différentes dans la bibliothèque. Pas mal pour un service gratuit!
Personnaliser votre aperçu
La plus grande partie de cette page est occupée par les aperçus de polices. Lorsque vous choisissez une police, il est absolument essentiel de la visualiser de la même manière que vous le souhaitez. Certaines polices ont une belle apparence pour les titres mais absolument horribles en tant que corps de texte.
«Lorsque vous choisissez une police, il est absolument essentiel de la visualiser de la même manière que vous le feriez pour la mettre en œuvre. ?Heureusement, Google Web Fonts vous permet de personnaliser votre aperçu en fonction de votre cas d'utilisation. Vous pouvez entrer un texte de prévisualisation personnalisé et modifier la taille de la prévisualisation.
Lorsque je veux vraiment bien regarder une police que je vais utiliser comme titre, j'aime utiliser le? Word? vue. La disposition de la grille ici est également le meilleur moyen de parcourir rapidement de nombreuses polices.
La partie la plus importante est de vous assurer de prévisualiser toute copie du corps que vous allez utiliser en vue de paragraphe. Honnêtement, c'est une bonne idée. Évitez d'utiliser une police personnalisée si vous avez beaucoup de corps de texte, mais il y a beaucoup de cas d'utilisation légitimes ici, aussi, faites preuve de prudence.
Tri et Filtrage
Comme nous l'avons vu plus haut, il y a plus de cinq cent familles de polices à examiner. Cela peut être une tâche brutale si vous les faites défiler une à une, mais les options de filtrage et de tri proposées ici peuvent considérablement simplifier ce processus et vous aider à définir exactement ce dont vous avez besoin.
Tri par popularité et par date d'ajout
Une chose rapide à faire est de changer de méthode de tri. J'aime voir ce qui est populaire ou récemment ajouté. Il est également utile que vous puissiez facilement trier selon le nombre de styles de la famille. Cela vous permet d’acquérir une famille polyvalente pouvant être utilisée dans différentes largeurs et styles.
Filtrage par caractéristiques et style
De loin, le moyen le plus utile d’améliorer vos résultats est d’utiliser les options de filtrage. Cela est particulièrement utile si vous connaissez le type de caractère que vous souhaitez implémenter. Par exemple, si vous savez que vous voulez une police manuscrite, vous pouvez désactiver tous les autres types des résultats.
Cela ne s'arrête pas là, Google va encore plus loin en vous permettant d'ajuster les résultats en fonction de l'épaisseur, de l'inclinaison et de la largeur des caractères. C'est une fonctionnalité vraiment cool que je n'ai jamais vue nulle part ailleurs.
Choisir les polices
Google a mis en place un système assez polyvalent pour choisir et implémenter différentes polices, ce qui signifie qu'il existe différentes façons de procéder. Il n'y a pas de bon ou de faux ici, seulement ce qui fonctionne le mieux pour vous et votre flux de travail unique.
Une façon de travailler est de passer et de cliquer sur? Utilisation rapide? bouton lorsque vous voyez une police que vous aimez. Cela vous mènera à une page qui vous montre comment utiliser cette police, que nous verrons plus tard. Vous pouvez également utiliser le? Pop out? bouton pour voir une fenêtre d’information qui vous en dit plus sur la police.
Si vous souhaitez utiliser plusieurs polices, le moyen le plus efficace de travailler consiste à utiliser la? Collection? fonctionnalité. Lorsque vous trouvez différentes polices que vous souhaitez utiliser, cliquez sur le bouton? Ajouter à la collection? bouton pour voir la police ajoutée à votre liste en bas de l'écran.
À partir de là, vous pouvez? ou? Télécharger? votre collection à l’aide des commandes en haut de l’écran ou choisissez entre? Review? et utilise? boutons en bas de l'écran.
Utiliser les polices
Une fois que vous êtes prêt à voir ces polices en action, passez à la section? Use? languette. La première chose que vous verrez ici est une liste des polices de votre collection avec la possibilité d'activer et de désactiver vos différents choix. Il existe également un indicateur pratique qui estime l'impact de ces polices sur le temps de chargement de votre page.
À partir de là, implémenter les polices est aussi simple que copier et coller du code. Vous aurez le choix entre trois options pour l'intégration initiale: Standard, @import et JavaScript.
- la norme - Ceci est un lien de feuille de style standard que vous placerez dans la partie principale de votre fichier HTML. Cela vous évite d'ajouter la règle @import à votre fichier CSS, car vous ajoutez essentiellement une feuille de style dans laquelle elle est déjà insérée.
- CSS - Si vous ne souhaitez pas créer de lien vers la feuille de style générée automatiquement dans votre en-tête, utilisez la règle CSS @import indiquée dans le deuxième onglet.
- JavaScript - Le code ici fait partie de WebFont Loader, une bibliothèque JavaScript qui a été développée par Google et Typekit pour vous permettre de mieux contrôler le chargement des polices. Vous pouvez en lire plus ici.
Une fois que vous avez correctement importé les polices, il ne vous reste plus qu'à les implémenter dans votre famille de polices CSS, comme vous le feriez toujours. L'extrait pour cela est près du bas:
Un exemple
Maintenant que nous connaissons tous les extraits et ce qu’ils font, je vais vous expliquer comment mettre en œuvre une collection de polices. La première chose à faire est de saisir l'extrait de code HTML et de le jeter en haut de votre code HTML comme suit:
Ensuite, passez au CSS. Ce que nous allons faire ici est assez différent de ce que nous avons vu ci-dessus. Voici le code:
Tout d'abord, j'ai utilisé le raccourci de police CSS pour économiser de la place. Cela nous permet de saisir toutes les caractéristiques de notre police sur une seule ligne, ce qui est excellent.
La première valeur que vous voyez est? 400? dans le h1 et le paragraphe. J'ai inséré ceci pour m'assurer que le navigateur affiche ces polices aux poids auxquels elles étaient censées être affichées, et nous avons vu précédemment que le poids prévu était de 400.
Ensuite, je règle la taille de la police suivie mais la hauteur de la ligne. Notez que je n’ai utilisé aucune sorte d’unités pour la hauteur de ligne, c’est une astuce intéressante qui va appliquer une hauteur de ligne relative qui change avec la taille de la police.
Enfin, j'insère les polices de Google et utilise mes propres sauvegardes, car je ne pense pas que vous devriez utiliser les choix de navigateur par défaut pour? Cursive ,? c'est ce que Google utilise dans son extrait.
C'est tout ce que nous devons faire. Chargez votre aperçu en direct dans un navigateur et vous devriez voir vos polices personnalisées parfaitement affichées.
Allez l'utiliser!
Vous venez tout juste d'apprendre à utiliser les polices Web de Google. Il est maintenant temps de vous y mettre et de mettre ces connaissances à profit pour les utiliser sur votre propre site. Parcourez les polices disponibles et réfléchissez à la manière dont vous pouvez améliorer la typographie dans vos projets. Rappelez-vous toujours que, avec les polices personnalisées, moins est plus. Allez-y doucement et utilisez cet outil de manière sélective.
Si vous ne parvenez pas à faire votre choix, ne manquez pas notre collection de 10 superbes combinaisons de polices Google, que vous pouvez copier (également la deuxième partie!).
Google Fonts
Google Fonts est une bibliothèque de plus de 800 types de caractères différents, totalement prête à être intégrée dans votre projet Web. Cette série présente les polices Google et présente des exemples intéressants et des combinaisons de polices permettant de faire passer votre projet au niveau supérieur.