Tuto – Changer sa police avec google font

Tuto – Changer sa police avec google font

changer-police

Voyons comment mettre une police google fonts sur notre site internet.

Dans un premier temps, réalisé un document HTML avec du texte et une classe ( ou un id )

<!DOCTYPE html>
<html>
<head>

<title> Changer la police </title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<p class="police"> Voici une nouvelle police </p>

</body>
</html>

Ce qui aura pour résultat  :

Ensuite RDV sur

https://fonts.google.com/

Une fois que c’est fait, regardez quelle est la police qui vous intéresse le plus et cliquez dessus.

Vous avez donc accès à une nouvelle page.

Maintenant, cliquez sur “select this style” sur la droite

Toujours sur la droite, après avoir cliqué sur “select this style”, une fenêtre va s’ouvrir.

Aller sur la section Embed.

Vous allez voir deux lignes de codes.

Dans votre HTML, copiez le premier lien et coller le dans votre head, ce qui donnera ceci :

<!DOCTYPE html>
<html>
<head>

<title> Changer la police </title>

<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Syne+Tactile&display=swap" rel="stylesheet">

</head>

<body>

<p class="police"> Voici une nouvelle police </p>

</body>
</html>

Et dans le CSS, vous allez copié et collé la seconde ligne de code dans l’élément voulu.

Ici, dans la classe police, ce qui donnera :

.police {
font-family: 'Syne Tactile', cursive;
}

Le résultat obtenu sera donc :

Leave a Reply