Comment utiliser une police de caractères personnalisée en HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2020-10-26 14:49:13
Thèmes : webmaster - html - css - police
Question

Comment faire pour utiliser une police de caractères personnalisée en HTML ?

Réponse

Pour utiliser une police de caractères personnalisée en HTML, vous devez :

  • Télécharger la police de caractères sur votre serveur Web.
  • Utiliser la règle CSS @font-face pour définir la police.
  • Déclarer la police personnalisée avec la propriété CSS font-family.

Voici un exemple pour utiliser une police HTML personnalisée du type truetype, nommée collaborativejob (collaborativejob.ttf) :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment utiliser une police de caractères personnalisée en HTML ?</title>
<style>
@font-face {
font-family: "collaborativejob";
font-weight: normal;
font-style: normal;
src: url('collaborativejob.ttf') format('truetype');
}
body {
font-family: "collaborativejob";
}
</style>
</head>
<body>
Bienvenue sur 1FORMATIK.com
</body>
</html>

Remarque : Le paramètre URL (src: url('collaborativejob.ttf') format('truetype');) doit, par défaut, sur les serveurs Apache ou Nginx, forcement être relatif ; vous ne pouvez pas utiliser une URL du type https:// sans préalablement ajouter des règles d'en-têtes personnalisées.