Ajouter une police d’écriture personnalisée sur une page web

Ras-le-bol des polices par défaut disponible dans sur toutes les machines ? Voilà comment en ajouter de nouvelles sur votre site web !

Polices d'écriture CSS HTML Web

Article publié le 11/03/2024, dernière mise à jour le 11/03/2024

Par défaut, l’utilisation de la règle CSS font-family ne permet que d’utiliser une police d’écriture déjà installée sur la machine de la personne qui visite votre site (ou application) web.

Mais il est possible d’inclure de nouvelles polices sur votre page, très facilement !

Pour cela, il y a deux solutions :

Inclure le fichier de la police directement dans son site
Utiliser une police déjà hébergée en ligne

nicolasbrondinbernard_a_ancient_book_opened_with_hieroglyphs_wr_d73e106b-fae6-41e9-b86a-e35fca41de09.jpg

Inclure un fichier

Pour inclure une nouvelle police en local sur votre page web, il suffit de coller le fichier de la police d’écriture (.otf ou .ttf de préférence) dans un dossier de votre projet, d’utiliser la directive @font-face, comme ceci :

@font-face {
    font-family : Roboto;
    src: url(fonts/roboto.ttf);
}

Ici on a imaginé que notre fichier se trouvait dans un sous-dossier fonts , mais libre à vous de choisir son emplacement !

Une fois que votre police est chargée grâce à la directive @font-face , vous pouvez l’utiliser directement dans votre CSS :

p {
	font-family : Roboto;
}

Et le tour est joué.

Attention aux épaisseurs

Lorsque vous importez une police d’écriture en local, c’est ce fichier unique qui sera utilisé, peu importe les valeurs de font-weight que vous allez utiliser. Par exemple pour le code suivant :

strong {
	font-family: Roboto;
	font-weight: bold;
}

C’est le navigateur qui va simuler la version bold de la police d’écriture, car vous ne lui avez fourni qu’une seule variation de la police.

Le rendu peut donc être parfait en épaisseur 400 (normal), mais rendre beaucoup moins bien en graisse 700 (bold) !

C’est pour cela qui est utile de passer par des plateformes qui proposent des polices d’écriture adaptées au web, comme expliqué ci-après.

Utiliser une police en ligne

De nombreuses plateformes vous permettent de trouver des polices complètes selon le style recherché, et avec plusieurs épaisseurs disponibles.

C’est notamment le cas de Google Font

Et en plus de vous fournir de très bonnes polices d’écriture gratuites, ces plateformes vous fournissent parfois les fichiers CSS qui paramètre les polices avec un fichier différent par épaisseur, ce qui permet d’avoir le meilleur rendu possible !

On peut directement ajouter ce fichier comme une dépendance de notre code CSS avec la directive @import comme ici :

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

Vous remarquez que les différentes épaisseurs de la police sont définies dans l’url par wght@400;700;900

Ou directement comme un fichier CSS à part entière que l’on va venir ajouter à notre document 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=Roboto:wght@400;700;900&display=swap" rel="stylesheet">
</head>

Attention au poids des polices

Chaque nouvelle police d’écriture, et chaque épaisseur alourdissent le poids final de la page. Il faut donc suivre deux règles :

N’ajoutez que les polices dont vous avez vraiment besoin (et supprimez les si elles sont inutilisées)
N’ajoutez que les variations nécessaires de chaque polices (certaines peuvent en avoir jusqu’à 10 différentes), et intégrez les au fur et à mesure de leur usage

Vous avez terminé l'article ?

Aucun commentaire pour l'instant