Comment utiliser Google Fonts dans HTML et CSS

Il existe de nombreuses polices disponibles dans HTML et CSS, mais si vous n'êtes pas satisfait des polices HTML / CSS standard et optez pour de nouvelles, nouvelles et dernières polices, vous pouvez utiliser Google Fonts. Google Font est la bibliothèque en ligne de Google qui nous permet d'utiliser différentes familles de polices via CDN (acronyme de Content Delivery Network) qui est gratuit pour tout le monde.

Cet article vous guidera dans les aspects suivants concernant les polices Google:

• Guide étape par étape pour les polices Google
• Comment utiliser diverses polices Google
• Comment styliser les polices Google

Guide étape par étape pour les polices Google

Afin d'utiliser les polices Google, vous devez suivre les étapes suivantes:

Premier pas
Visitez le site officiel de Google Fonts et la fenêtre suivante apparaîtra:

Deuxième étape
Sélectionnez la catégorie / famille de police de votre choix:

Troisième étape
Sélectionnez la police Google de votre choix (E.g. quintessentia):

Maintenant cliquez sur le "Sélectionnez ce style":

Quatrième étape
Copiez le lien du style sélectionné dans la fenêtre qui apparaît sur le côté droit de l'écran:

Collez le lien dans la section Head du document HTML:

Cinquième étape
Copiez les règles CSS pour la famille de la police

Et collez-le dans le fichier CSS:

Nous voulons appliquer le style sur le

élément donc nous le collez dans le sélecteur P. Nous allons maintenant obtenir la sortie suivante:

La sortie montre que la police google "quintessentielle" est implémentée sur le

élément avec succès.

Comment utiliser diverses polices Google

Toute la procédure sera la même, sélectionnez les plusieurs polices Google, copiez le lien et collez-le dans la section Head du fichier HTML:

Html

Polices CSS

Premier paragraphe

La deuxième paragraphe

CSS

Maintenant, nous sélectionnons deux polices Google différentes I.e. «Couftor» et «Open Sans», nous voulons utiliser «Counter» pour le

élément et «Sans ouverts» pour le

éléments. Donc, notre CSS ressemblera à ceci:

H3
Font-Family: «Consoard», cursive;

p
Font-Family: «Open Sans», Sans-Serif;

Dans le fichier CSS, collez les règles CSS dans les sélecteurs d'éléments pour les styliser en fonction du choix. Il donnera la sortie suivante:

La sortie prouve que les règles CSS sont mises en œuvre avec succès sur les éléments HTML.

Comment styliser les polices Google

Avec l'aide de CSS Properties, nous pouvons styliser les polices Google en fonction de notre choix, notre fichier HTML restera le même et le fichier CSS ressemblera à ceci:

CSS

H3
Font-Family: «Consoard», cursive;
La couleur rouge;
Text-shadow: 5px 5px 5px # 83647E;

p
Font-Family: «Open Sans», Sans-Serif;
La couleur rouge;
Text-shadow: 5px 5px 5px # 83647E;

La sortie de l'extrait ci-dessus apparaîtra comme ceci:

Conclusion

Pour ajouter Google Fonts, recherchez les polices Google, sélectionnez la catégorie de police et la famille, puis sélectionnez le style de police de votre choix. Une fois que vous avez sélectionné la police, «Copiez le lien de police», dans les «Windows Families sélectionnées» et collez-le dans la section Head du fichier HTML. Ensuite, copiez le «CSS Règles pour les polices» et collez-le dans le sélecteur CSS. Le style peut être ajouté aux polices Google en utilisant les propriétés CSS.