Nos formations 
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 !
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
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 graisse700(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
Aucun commentaire pour l'instant