Les polices (fonts) en CSS

Définir la police à utiliser

Pour indiquer la police à utiliser, nous utilisons la propriété font-family à laquelle on peut donner plusieurs polices séparées par des virgules. Le navigateur appliquera alors la 1ère police, ou la 2nd si la 1ère n’est pas disponible, puis la 3ème si la 2nd n’est à son tour pas disponible, et ainsi de suite. Il est de bonne habitude de terminer par la police serif qui correspond à une police par défaut si aucune autre n’a été trouvée. Si un nom de police contient des espaces, il doit être indiqué entre guillemets.

p {
    font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}

Utiliser une police non standard

Il n’existe pas réellement de polices standards mais seulement des polices plus au moins répandues. Si l’on souhaite utiliser une police spécifique, qui n’est par défaut pas disponible sur les systèmes d’exploitation, il faut l’intégrer à sa page de sorte que celle-ci soit préalablement téléchargée par le navigateur afin de pouvoir ensuite être utilisée dans la page. On utilise pour cela la propriété CSS @font-face.

@font-face {
    font-family: "Fonte perso";
        src: url('MaSuperFonte-Regular.eot') format('eot'),
        url('MaSuperFonte-Regular.woff') format('woff') ,
        url('MaSuperFonte-Regular.ttf') format('truetype') ,
        url('MaSuperFonte-Regular.svg') format('svg');
}
 
@font-face {
    font-family: "Fonte perso";
    font-style: italic;
    src: url('MaSuperFonte-Italic.ttf');
}
 
@font-face {
    font-family: "Fonte perso";
    font-weight: bold;
    src: url('MaSuperFonte-Bold.ttf');
}

Il suffit ensuite de définir comme police Fonte perso dans la propriété CSS font-family des différents éléments HTML et le navigateur se chargera d’utiliser la fonte appropriée selon que ‘’éléments ait ou non les propriétés CSS permettant d’afficher du texte en italique ou en gras.

Il existe différents formats que voici (des outils en ligne permettent de convertir une fonte TTF en EOT) :

De nombreuses fontes sont disponibles sur :

• https://www.fontsquirrel.com
• https://www.dafont.com/fr
• https://fonts.google.com