Comment utiliser les polices Google dans votre prochain projet Web et pourquoi?

Le choix des polices est une décision de conception intégrale sur tous les sites Web. Pourtant, la plupart du temps, nous nous contentons de la même famille de serif et de sans-serif. Alors que le corps principal du texte doit toujours être optimisé pour la lisibilité, à moins que vous ne souhaitiez que les lecteurs aient mal à la tête, les titres et les textes hors concours peuvent être votre espace pour ajouter un design unique avec une touche de police.

Lisez la suite pour savoir comment utiliser les polices Web de Google sur votre site..

Contexte

Avec CSS, vous pouvez spécifier une chaîne de polices à utiliser si celle que vous préférez n'est pas disponible. Cela vous permet d’avoir un premier choix - peut-être une police moins commune mais gratuite; puis avoir des sauvegardes en place qui seront toujours là avec Windows ou Mac. En règle générale, les concepteurs de sites Web s'en tiennent à des chaînes de familles de polices éprouvées, décrites par les écoles W3.

Auparavant, si une police de caractère différente était souhaitée, les concepteurs étaient obligés de créer des images pour le texte - logo, en-têtes, etc. Les inconvénients de ce qui suit:

• Les images ne s'agrandissent pas bien.
• Les images ne sont pas lisibles par les lecteurs d'écran.
• Vous ne pouvez pas surligner le texte dans les images.
• Les moteurs de recherche ne peuvent pas “lis” images.
• Le chargement de l'image ralentit la page Web.

Alors, y a-t-il une meilleure solution? Celui qui nous permet d’utiliser un ensemble de polices gratuites universellement disponibles, sans avoir recours aux images?

Google Web Fonts

La réponse vient de Google. Google Web Fonts est essentiellement une collection de (au compte actuel, 489) des polices optimisées stockées dans le cloud, qui peuvent être intégrées à vos projets Web (ou même simplement téléchargées pour être utilisées sur votre ordinateur).

De plus, le site Google Web Fonts facilite la comparaison et le choix, puis vous fournit tout le code nécessaire à l'intégration de la police via Javascript ou CSS. Plus d'informations à ce sujet ultérieurement..

Commencer

Rendez-vous sur le site Web Fonts, puis cliquez sur commencer à choisir les polices pour commencer.

L'interface est assez explicite: à gauche, vous pouvez rechercher des mots clés spécifiques. et filtrer par type de police de base; ou filtrer pour des facteurs spécifiques tels que l'épaisseur de la lettre. La barre en haut ajuste uniquement le texte de prévisualisation. Si vous souhaitez tester un paragraphe de texte spécifique, par exemple, passez à l'onglet de paragraphe et collez-le dans le texte..

Comme je l'ai mentionné, il vaut mieux ne pas choisir un contenu trop sophistiqué pour le texte principal. Vous devez donc vous en tenir aux familles serif ou sans-serif si vous voulez vraiment y aller pour quelque chose d'unique..

Lorsque vous en voyez une que vous aimez, ajoutez-la simplement à votre collection.

Clique le la revue bouton pour entrer en mode révision et comparer tous vos choix.

En mode révision, vous avez le choix entre différentes tailles de police et un texte de paragraphe ou de titre. Le système fera également un choix intelligent sur lequel vous montrer en fonction du cas d'utilisation typique de cette police; mais vous pouvez changer le mode de prévisualisation si vous le souhaitez.

Faites défiler vers la droite pour voir les autres polices de votre collection actuelle. cliquez sur le X en haut à droite pour les rejeter.

Essai routier est un mode particulièrement intéressant qui combine toutes les polices de votre collection pour montrer à quoi il pourrait ressembler lorsqu'il est combiné à une mise en page de base.

OK, choisi. Comment les utiliser?

Avec votre collection réduite, cliquez sur le bouton la revue bouton sur la grande barre bleue. Si vous êtes allé trop loin et en avez inclus trop (en réalité, maintenez-le au maximum à 2), l'indicateur d'impact de la charge de la page vous en avertit..

Faites défiler la liste pour saisir le code correspondant. Il y a 3 choix ici:

• Standard (lien rel = méthode): ceci doit être collé dans la section HEAD de votre site, vous devez donc être à l'aise avec le langage HTML pour ce faire. Pour WordPress, vous l'ajouterez à header.php si vous choisissez de cette façon. Je ne le recommande pas.
• @importation: cette méthode va directement dans votre fichier de feuille de style, où nous allons quand même spécifier les polices pour divers éléments de page, donc personnellement, je le recommande. Pour les thèmes WordPress, placez-le dans style.css juste après la section d'informations sur le thème
• Javascript: explicite - placez le code n'importe où dans votre thème. L'avantage d'utiliser cette méthode est que la police sera chargée de manière asynchrone - le site sera d'abord affiché dans la police de secours, puis basculera une fois la police chargée. Bien que le temps de chargement initial de la page soit plus rapide, il créera un changement soudain et bouleversant pour l'utilisateur que vous ne voudrez peut-être pas.

C'est l'étape 1. L'étape 2 consiste à spécifier la police où vous voulez l'utiliser. Nous n'avons pas de place pour un tutoriel CSS complet ici (je suggère ces 5 sites d'apprentissage CSS. Les 5 meilleurs sites pour apprendre le CSS en ligne. Les 5 meilleurs sites pour apprendre le CSS en ligne. En savoir plus; et mes 5 petites étapes dans le tutoriel CSS. Apprendre CSS et devenir un kick-ass CSS Sorcerer 5 étapes initiales pour apprendre le CSS et devenir un kick-Ass CSS De manière moderne, XHTML définit la structure sémantique… Lire la suite), mais il suffit de dire que vous allez ajuster quoi que ce soit dans votre feuille de style qui dit: famille de polices, et veillez à inclure le style de sauvegarde suggéré par Google..

Optimisé

L'utilisation d'une police non standard que l'utilisateur doit télécharger va ajouter un peu de temps au chargement de votre page - c'est inévitable. Toutefois, une police Web typique de Google fait environ 100 Ko. À titre de comparaison, la taille d’une image JPEG de taille moyenne est de bonne qualité. Comme les images, la police Web sera mise en cache dans le navigateur de l'utilisateur, de sorte que seul le chargement initial de la page sera légèrement retardé..

Résumé

Je l'avoue, j'aime beaucoup les polices. Comme beaucoup d’entre vous, j’attends de les stocker sur mon disque dur - juste au cas où, vous savez?! Maintenant, je peux réellement utiliser des polices uniques dans mes projets Web - je suis enthousiasmé. S'il vous plaît, ne négligez pas les polices de votre site Web!

Si vous avez des questions sur la mise en œuvre de polices Web sur votre site Web, n'hésitez pas à les demander dans les commentaires et je verrai si je peux vous aider..