Guide d'utilisation des polices Google avec Google et les plugins !

Si vous êtes un designer, vous êtes plus susceptible de considérer la typographie comme la base de toute conception de site Web. Non seulement la sélection des polices, mais également la lisibilité des pages Web.

Qu'est-ce que la typographie ?
La typographie consiste à sélectionner la longueur des lignes, la taille des points, l'espacement des lignes, les polices de caractères et à ajuster les espaces entre les groupes de lettres.

Pourquoi Google Fonts est-il un choix évident ?
Il y avait des moments où Internet avait des polices standard qui ennuyaient quiconque les regardait, mais au fil du temps, les concepteurs et développeurs Web ont été obligés de limiter leurs choix de polices de texte en direct et de concevoir les polices compatibles avec le plus grand nombre d'utilisateurs sur l'Internet. Ils sont venus avec CSS3. Typekit l'a initié.

Typekit a développé certaines des polices attrayantes qui ont aidé les concepteurs à sélectionner des polices attrayantes et conviviales pour leurs pages Web, mais le seul problème lié à l'utilisation de Typekit était le coût qu'ils facturaient à leurs utilisateurs.

Le prix était de 49 $ et au cas où un concepteur voudrait développer deux sites, il devait payer 99 $ juste pour utiliser des polices sur la page Web. Merci à Google qui est venu avec ses superbes conceptions de polices et l'a offert gratuitement.

Il est bien évident que vous n'obtenez pas gratuitement ce que vous pouvez obtenir avec de l'argent, mais croyez-le, les polices Web de Google étaient néanmoins supérieures à celles proposées par Typekit. Bien sûr, les polices Web Google sont les meilleures lorsque vous n'aimez pas dépenser trop pour les polices, car vous savez que la construction d'un site Web complet coûte trop cher.

Les polices Google et leur personnalisation :
À ce jour, il existe plus de 647 familles de polices distinctes dans la bibliothèque Google. Lorsque vous sélectionnez une police pour le contenu de votre site Web, il est impératif de la visualiser de la même manière que vous allez implémenter cette police. Certaines polices semblent parfaites pour le contenu du corps mais terribles comme titre.

Heureusement, Google Web Fonts vous permet de personnaliser votre aperçu en fonction de votre cas d'utilisation. Vous pouvez saisir un texte d'aperçu personnalisé et modifier la taille de votre aperçu selon vos préférences. Il est important de prévisualiser tout en-tête ou corps de texte que vous allez utiliser en mode paragraphe et si vous avez beaucoup de corps de texte, n'utilisez pas trop de polices personnalisées.

Entonnoir vers la bonne police !
Comme nous connaissons plus de six cents familles de polices à parcourir, il devient difficile de filtrer et de choisir la bonne en les faisant simplement défiler une par une. Suivez donc les étapes ci-dessous pour déterminer exactement ce dont vous avez besoin pour votre site Web :

• Jetez un coup d'œil aux polices récemment mises à jour par Google. Il y a de fortes chances que vous obteniez la police tendance et sans bogue sans avoir à regarder le reste des polices. Consultez également les polices utilisées par la plupart des concepteurs et développeurs. Cela vous permettra de connaître les polices polyvalentes que vous pouvez utiliser dans plusieurs styles et largeurs.
• Si vous connaissez la police de caractères de votre site Web, les caractéristiques et le style des polices peuvent améliorer vos résultats. Par exemple, si vous souhaitez une police manuscrite, désactivez tous les autres types de résultats.
• Google vous permet d'affiner davantage votre recherche de polices en ajoutant l'épaisseur, l'inclinaison et la largeur du caractère comme options de filtrage. N'est-ce pas une fonctionnalité intéressante pour obtenir la meilleure police pour votre site Web ?

Sélection des polices
Google propose différentes méthodes pour choisir puis implémenter les polices en fonction des besoins du propriétaire du site Web. Il n'y a rien de bien ou de mal ici. Tout ce qui est le mieux pour vous, vous l'obtiendrez. Il prend en charge trois boutons pour vous aider à choisir la bonne police :

• Utilisation rapide : Pour jeter rapidement un coup d'œil à la police que vous aimez.
• Pop out : Pour en savoir plus sur la police que vous aimez, c'est-à-dire ses fonctionnalités et ses utilisations.
• Collection : Si vous souhaitez utiliser plus de deux polices, Collection est le bouton sur lequel vous devez cliquer. Il ajoutera toutes les polices que vous aimez sur une seule page.

Comment utiliser les polices Google ?
Une fois que vous avez sélectionné les polices que vous souhaitez utiliser sur votre page Web, vous pouvez cliquer sur l'onglet "Utiliser" pour les voir en action. Maintenant, lorsque vous êtes sûr de la police, il vous suffit de copier et coller du code sur votre page Web. Vous aurez le choix entre trois options :

Standard:
C'est un lien de feuille de style standard. Vous devez le placer dans la partie principale de votre fichier HTML, ce qui vous évite d'ajouter la règle @import car vous ajoutez de manière significative une feuille de style qui l'a déjà ajoutée. Exemple :

CSS :
Utilisez la règle CSS @import 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 le code ci-dessous pour intégrer les polices dans votre CSS :

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

Javascript
Google et Typekit ont tous deux développé ce code ici dans le cadre du chargeur WebFont pour donner aux utilisateurs plus de contrôle sur le chargement des polices.

Prenez un extrait HTML et placez-le près de l'en-tête HTML comme suit :

Titre de la page

Allez au CSS et suivez ceci :

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

Avec l'aide de plugins !
Certains plugins disponibles offrent une intégration transparente de Google Font. L'utilisation de plugins a ses limites, car un plugin ne saura pas rechercher un texte particulier sans le personnaliser davantage à l'aide de HTML ou CSS. Mais encore, voici quelques plugins pour inclure les polices Google sur votre site Web.

1. Plug-in de polices

C'est un moyen simple et efficace d'incruster des polices Google sur votre site Web en quelques clics seulement. Vous pouvez soit utiliser votre feuille de style, soit utiliser le style CSS ; les deux travailleront pour les adapter à votre thème. Vous pouvez le faire à partir de la zone d'administration ou de la feuille de style de votre site Web. Fonts Plugin est tout ce dont vous avez besoin pour votre site Web, rapidement et efficacement.

2. Polices Google faciles

Avec le plug-in Easy Google Fonts, vous n'avez pas besoin de toucher à un codage pour obtenir les polices sur votre site Web. Du choix à l'optimisation et à l'attribution de couleurs uniques à la prévisualisation, tout ce qui concerne les polices peut être fait à l'aide de Easy Google Fonts.

3. Polices Google TK

TK Google Fonts ajoutera les 291 polices Web Google dans votre panneau d'éditeur visuel lorsque vous développez des pages ou des publications. Il suffit de l'installer et de commencer à l'utiliser.

Installation des plugins ci-dessus :

• Connectez-vous à l'administrateur WordPress
• Cliquez sur "Plug-ins"
• Cliquez sur "Ajouter un nouveau"
• Tapez le nom des plugins dans le coin supérieur droit et cliquez sur "installer maintenant"

Pour personnaliser les plugins

• Cliquez sur "Apparence" puis cliquez sur "Personnaliser".
• Cliquez sur « Visiter le site » puis sur « Personnaliser »
• Vous remarquerez un nouveau menu ajouté comme "Typographie"

Mettre en œuvre l'apprentissage !
Nous espérons que la lecture de l'article a été une leçon d'apprentissage à utiliser, et maintenant, il est temps d'utiliser ces connaissances sur votre site Web. Parcourez diverses polices et plugins pour améliorer la typographie de vos sites Web. Gardez à l'esprit que si vous personnalisez une police, ce sera plus avantageux que de simplement copier-coller une police. Faites-nous savoir les polices et les méthodes que vous utilisez pour ajouter de la typographie pour séduire votre public dans vos projets.

Les polices améliorent la forme esthétique d'un site Web et constituent la base de toute conception de site Web. Les polices ou la typographie consistent à sélectionner la longueur de ligne, la taille des points, l'espacement des lignes, les polices de caractères et à ajuster les espaces entre les lettres du groupe.

En tant que designer, il est toujours bon d'affiner davantage votre recherche de polices en ajoutant l'épaisseur, l'inclinaison et la largeur du caractère comme options de filtrage. Toutes les polices ne sont pas belles dans le contenu du corps et/ou du titre.

Certaines polices n'ont pas l'air bien en tant qu'en-tête et d'autres ne peuvent pas être lues facilement sur le contenu du corps. Par conséquent, il est conseillé de visualiser la police sélectionnée de la même manière que vous allez l'implémenter afin de pouvoir tester sa lisibilité.

Fini le temps où Internet avait les mêmes vieilles polices standard ennuyeuses. La technologie avancée et les concepteurs et développeurs Web ont été contraints de concevoir des polices compatibles avec le plus grand nombre d'utilisateurs sur Internet.

Ils sont venus avec CSS3. Typekit l'a lancé et a développé certaines des polices attrayantes et attrayantes que les concepteurs de sites Web peuvent utiliser. Mais, ils étaient trop coûteux. Heureusement, Google est venu à la rescousse et a proposé gratuitement des conceptions de police brillantes et conviviales.

Entonnoir vers la bonne police !

Actuellement, le nombre de polices dans la bibliothèque Google s'élève à 647, ce qui rend difficile le filtrage et le choix de la bonne. Cependant, avec ces 3 étapes, vous pouvez obtenir exactement ce dont vous avez besoin pour votre site Web :

• Jetez un œil aux polices récemment mises à jour sur Google et obtenez une police tendance et sans bogue. Recherchez également les polices utilisées par la majorité des concepteurs pour vous permettre de connaître la polyvalence des polices que vous pouvez utiliser dans plusieurs styles et largeurs.
• Connaissez la police de caractères de votre site Web, les caractéristiques et le style des polices pour améliorer vos résultats.
• Affinez votre recherche de polices en ajoutant l'épaisseur, l'inclinaison et la largeur du caractère comme option de filtrage.

Sélection des polices

Selon vos besoins, Google propose plusieurs méthodes pour vous aider à sélectionner une police. Pour choisir la bonne police, pensez à :

Accès rapide-Pour jeter rapidement un coup d'œil à la police que vous aimez

Pop Out - Pour en savoir plus sur la police, c'est-à-dire ses fonctionnalités et ses utilisations

Collection-Si vous souhaitez utiliser plus de deux polices, cliquez sur ce bouton. Il ajoutera toutes les polices que vous aimez sur une seule page.

Comment utiliser les polices Google

Une fois que vous avez sélectionné votre police préférée, cliquez sur l'onglet "Utiliser" pour les voir en action. Ensuite, copiez et collez du code sur votre page Web. Vous aurez le choix entre trois options :

Standard - Il s'agit d'un lien de feuille de style standard. Placez-le dans la partie head de votre fichier HTML. Cela vous évitera d'ajouter la règle @import car vous ajoutez de manière significative une feuille de style qui l'a déjà.

CSS -Utilisez la règle CSS @import 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 le code ci-dessous pour intégrer les polices dans votre CSS :

famille de polices : 'Henry Pigeous', serif ;
font-family : 'Diplomatic'. cursive;

JavaScript -Google et Typekit ont tous deux développé ce code ici dans le cadre du chargeur de polices Web pour donner aux utilisateurs plus de contrôle sur le chargement des polices .

Prenez un extrait HTML et placez-le près de l'en-tête HTML comme suit :

Titre de la page

Allez au CSS et suivez ceci :

h1 {

police : 400 45px/0.5 'Diplomatic', Arial, sans-serif ;

}

p {

police : 400 14px/1.5 'Henry Pegasus', Times, serif ;

}

A propos de l'auteur:
Catherine Garcia est une développeur Web expérimentée chez Hosting Facts et une blogueuse passionnée. Elle adore partager ses connaissances à travers ses articles sur le développement web et WordPress.