Comment utiliser les polices google dans votre prochain projet web et pourquoi vous devriez

choix de police est une décision de conception intégrale sur un site Web, mais la plupart du temps, nous sommes satisfaits de la même famille ancienne serif et sans-serif. Alors que le corps principal du texte doit toujours être quelque chose optimisé pour une meilleure lisibilité à moins que vous voulez lecteurs d`avoir un mal de tête, les titres et les textes hors concours peuvent être votre espace pour ajouter un design unique avec un peu de flair de la police.

Poursuivez votre lecture pour savoir comment utiliser l`un des Google Web Fonts sur votre site.

Contexte

Avec CSS, vous pouvez spécifier d`utiliser une chaîne de polices si l`on préfère n`est pas disponible. Cela vous permet d`avoir un premier choix - peut-être un font- moins commun mais libre ont alors des sauvegardes en place qui seront toujours là avec Windows ou Mac. En général, cependant, les concepteurs Web collera avec des chaînes de la famille de polices éprouvées, comme indiqué par les écoles w3.

Dans le passé, si une autre police était souhaitée, les concepteurs ont été contraints de créer des images pour le texte à la place - logo, en-têtes, etc. Les inconvénients d`être là:

• Les images n`échelle pas bien.
• Les images ne sont pas lisibles par les lecteurs d`écran.
• Vous ne pouvez pas sélectionner le texte dans les images.
• Les moteurs de recherche ne peuvent images « lire ».
• Chargement de l`image ralentit la page Web.

Alors, est-il une meilleure solution? Qui nous permet d`utiliser un ensemble universellement disponible des polices libres, sans avoir recours à des images?

Google Web Fonts

La réponse vient de Google. Google Web Fonts est essentiellement une collection de (au nombre actuel, 489) Polices optimisées stockées dans le nuage, qui peuvent être intégrés dans vos projets web (ou même téléchargé à utiliser sur votre ordinateur).

De plus, le site Google Web Fonts il est facile de comparer et de choisir, vous donne tout le code que vous devez intégrer la police via javascript ou CSS - plus sur cela plus tard.

Commencer

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

L`interface est assez explicite - à gauche vous pouvez rechercher des keywords- spécifiques et filtrer par la police de base ou type- filtre pour des facteurs spécifiques tels que l`épaisseur de la lettre. La barre sur le dessus ajuste le texte de prévisualisation seulement. Si vous avez un paragraphe de texte spécifique que vous voulez le tester sur, par exemple, passer à l`onglet paragraphe et coller dans votre texte.

Comme je l`ai mentionné, vous êtes mieux de ne pas choisir quelque chose de trop de fantaisie pour le texte contenu principal, mieux vaut donc rester à deux familles serif ou sans-serif si vous voulez vraiment aller pour quelque chose unique.

Quand vous voyez que vous le souhaitez, il suffit d`ajouter à votre collection.

Clique le la revue bouton pour passer en mode d`examen et comparer tous vos choix.

En mode d`examen, vous êtes montré une variété de tailles de police et soit un texte de paragraphe ou titre. Le système permettra également de faire un choix intelligent sur lequel vous montrer selon les cas d`utilisation typique de cette font- mais vous pouvez changer le mode de prévisualisation si vous le souhaitez.

Défilement vers la droite pour voir d`autres polices dans votre actuelle collection- cliquez sur le X en haut à droite de les rejeter.

test Drive est un mode particulièrement intéressant qui combinera toutes les polices de votre collection pour montrer comment il pourrait ressembler lorsqu`il est combiné à une mise en page de base.

OK, Choisi. Comment puis-je utiliser?

Avec votre collection rétréci vers le bas, cliquez sur le la revue bouton sur la grande barre bleue. Si vous êtes allé trop loin et trop inclus (vraiment, gardez à 2 au maximum), l`indicateur d`impact de chargement de la page vous avertit.

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

• Standard (link rel = procédé): Cela doit être collé dans la section HEAD de votre site, vous aurez donc besoin d`être à l`aise avec le langage HTML pour ce faire. Pour WordPress, vous ajouterez à header.php si vous choisissez cette façon. Je ne le recommande pas.
• @importer: cette méthode va directement dans votre fichier de feuille de style, ce qui est, donc je vous recommande personnellement où nous allons spécifieront les polices pour différents éléments de la page de toute façon cela. Pour les thèmes WordPress, placez-le dans style.css juste après la section d`information sur le thème
• javascript: Explicite - placez le code partout dans votre thème. L`avantage de 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 que la police a complètement chargée. Bien que le temps de chargement de la page initiale sera plus rapide, il crée un changement soudain discordante pour l`utilisateur que vous ne voulez pas.

C`est l`étape 1. Étape 2 est de spécifier la police où vous voulez utiliser. Nous ne disposons pas de place pour un tutoriel CSS complet ici (je suggère ces 5 sites d`apprentissage CSS- et moi-même 5 étapes pour bébés dans le tutoriel CSS), Mais il suffit de dire que vous serez adaptez quelque chose dans votre feuille de style qui dit famille de polices, et assurez-vous d`inclure le style de sauvegarde comme suggéré par Google.Les 5 meilleurs sites pour en savoir CSS en ligneLes 5 meilleurs sites pour en savoir CSS en ligneLire la suite

optimisation

En utilisant une police non standard que l`utilisateur doit télécharger va ajouter une petite quantité de temps à votre chargement de la page - qui est inévitable. Cependant, une police web typique de Google est sur le point 100KB - à titre de comparaison, cela est de la taille d`une bonne taille moyenne qualité d`image jpeg. Comme les images, la police Web sera mis en cache dans le navigateur de l`utilisateur, de sorte que la charge de la page initiale sera légèrement retardée.

Résumé

Je l`admets - Je l`aime vraiment les polices. Je pense que beaucoup d`entre vous, je tends les horde sur mon disque dur - juste au cas où, vous le savez ?! Maintenant, je peux réellement faire usage de certaines polices uniques dans mes projets web - je suis excité. S`il vous plaît, ne négligez pas les polices sur votre site!

Si vous avez des questions concernant la mise en œuvre des polices Web sur votre site, ne hésitez pas à demander dans les commentaires et je vais voir si je peux aider.