Importer des Google Fonts en CSS

1. Utilisation de la règle @import pour importer Google Fonts en CSS
2. Utiliser la balise link pour importer les Google Fonts en CSS

Dans ce tutoriel, nous allons apprendre quelques méthodes pour importer des Google Fonts en CSS.

Utilisation de la règle @import pour importer Google Fonts en CSS

La règle CSS @import permet d’importer une autre feuille de style dans une feuille de style. Nous pouvons spécifier la feuille de style dans la fonction url() et sous forme de chaîne.

On peut aussi utiliser la règle @import pour importer des polices externes en CSS. Par exemple, nous pouvons utiliser les Google Fonts dans la fonction url() et définir la police avec la propriété font-family.

Les Google Fonts ont des variétés de polices parmi lesquelles nous pouvons choisir. Nous pouvons obtenir l’URL de la police sur le site Web.

Par exemple, allez sur le site de Google Fonts et choisissez la police Roboto. Ensuite, cliquez sur le bouton radio @import dans la barre latérale à droite.

Ensuite, copiez l’URL entre la balise style. De même En HTML, créez les balises h1 et p.

En CSS, écrivez la règle @import en haut de la feuille de style et collez l’URL de la police Roboto à l’intérieur de la fonction url(). Sélectionnez la police Outfit et obtenez l’URL.

Ensuite, sélectionnez la balise h1 et utilisez la propriété font-family pour définir la police Outfit. De même, définissez la police Roboto dans le paragraphe.

De cette façon, nous pouvons importer des Google Fonts dans une feuille de style.

Cependant, l’utilisation de la règle @import pour importer des Google Fonts est déconseillée. C’est parce que les polices n’apparaîtront pas sur la page Web à moins que le fichier ne soit récupéré.

Exemple de code :

<h1> Title </h1>
<p>This is Roboto font.</p>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');

h1 {
 font-family: 'Outfit', sans-serif;
}

p {
 font-family: 'Roboto', sans-serif;
}

Utiliser la balise link pour importer les Google Fonts en CSS

La balise link est le moyen le plus approprié pour importer des Google Fonts en HTML. La balise link est encouragée car elle précharge la police.

Nous pouvons spécifier l’URL de la police dans l’attribut href de la balise link. Nous pouvons générer toutes les balises link à partir du site Google Fonts.

Par exemple, allez sur le site de Google Fonts et choisissez la police Comforter Brush. Sélectionnez le bouton radio link et copiez les balises link générées.

Ensuite, collez les balises en HTML et créez une balise p et écrivez du texte à l’intérieur. Ensuite, sélectionnez la balise p dans CSS et définissez la propriété font-family sur Comforter Brush.

Nous avons utilisé preconnect pour l’attribut rel dans les deux premières balises link. Il permet au navigateur de savoir que l’utilisateur a besoin des ressources de l’attribut href afin que le navigateur puisse initier une connexion préemptive aux ressources.

De cette façon, nous pouvons utiliser la balise link pour importer les Google Fonts en CSS.

Exemple de code :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap" rel="stylesheet"> 

<p>Comforter Brush font.</p>

p {
 font-family: 'Comforter Brush', cursive;
}