La méthode pour changer la police en HTML et CSS diffère selon que la police que vous voulez utiliser est générique ou particulière ; stockée sur votre serveur Web, ou importée depuis une API.
Si la police à changer est une police générique, qui est intégrée dans la plupart des navigateurs internet et des systèmes d'exploitation (Aria, Verdana, Helvetica, Tahoma, Trebuchet, Times New Roman, etc.), vous pouvez changer la police via la propriété CCS font-family :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment changer la police en HTML et CSS ?</title>
<style>
.verdana {
font-family: verdana;
}
</style>
</head>
<body>
<div class="verdana">Un texte dont la police a été changée en Verdana</div>
</body>
</html>
Si la police à changer est une police particulière que vous allez stocker sur votre serveur Web, vous pouvez changer la police via la règle CSS @font-face :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment changer la police en HTML et CSS ?</title>
<style>
@font-face {
font-family: "Ubuntu"; font-display: swap;
src: local("Ubuntu"), url("police/Ubuntu-regular.woff") format("woff");
}
.ubuntu {
font-family: Ubuntu;
}
</style>
</head>
<body>
<div class="ubuntu">Un texte dont la police est Ubuntu et a été chargée depuis le serveur Web</div>
</body>
</html>
Si la police à changer est une police particulière que vous allez importer depuis un serveur tier ou une API, vous pouvez changer la police via la règle CSS @import :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment changer la police en HTML et CSS ?</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
.ubuntu {
font-family: Ubuntu;
}
</style>
</head>
<body>
<div class="ubuntu">Un texte dont la police est Ubuntu et est importée depuis l'API de Google</div>
</body>
</html>
