Ads by ProfitSence
Close

Importer des polices Google en CSS

Last Updated on jeudi 6 oct. 2022

google font

Google Fonts est un service gratuit de polices Web qui nous permet d’utiliser une grande variété de polices dans notre fichier CSS.

  • Choisissez <link> ou @import en fonction de l’endroit où vous devez ajouter la police (en HTML ou CSS).

import google font css

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

L’importation de Google Fonts doit toujours être la première ligne du fichier CSS. Il n’est pas recommandé d’importer trop de polices pour offrir une meilleure vitesse de chargement.

			
					<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel augue eu quam commodo hendrerit vitae eget erat.
Pellentesque bibendum ex vitae quam fringilla, in efficitur mi vestibulum. Maecenas euismod consequat mattis.
Sed accumsan condimentum felis, eget accumsan purus feugiat eget. Quisque vel vulputate purus, at rhoncus enim.
Quisque quis congue turpis. 
Vivamus eleifend aliquet metus, at convallis lectus vulputate eu. Suspendisse pharetra lacus diam, nec facilisis sapien gravida ac.
<p>

			
	

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

google font import

			
					@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');

h1,p {
    font-family: 'Noto Serif', serif;
}

			
	

css google font

Utilisation de la balise link pour importer les polices Google en CSS

  • La balise link est le moyen le plus approprié d’importer des polices Google 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 de lien à partir du site Web Google Fonts.
			
					<html>
  <head>
    <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=Noto+Serif&display=swap" rel="stylesheet">
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel augue eu quam
    commodo hendrerit vitae eget erat. Pellentesque bibendum ex vitae quam fringilla, 
    in efficitur mi vestibulum. Maecenas euismod consequat mattis. Sed accumsan 
    condimentum felis, eget accumsan purus feugiat eget. Quisque vel vulputate purus,
    at rhoncus enim. Quisque quis congue turpis. Vivamus eleifend aliquet metus, at 
    convallis lectus vulputate eu. Suspendisse pharetra lacus diam, nec facilisis 
    sapien gravida ac.
    <p>
  </body>
</html>

			
	

font family css

			
					h1,p {
    font-family: 'Noto Serif', serif;
}