# Webfonts

Pourquoi des webfonts ?

La typographie est importante pour pouvoir concevoir des pages de caractère. Malheureusement, l’éventail des polices disponibles par défault est limité (Arial, Verdana, …). Fondamentalement, toute police que vous avez installée sur votre ordinateur peut être utilisée sur le web. Cependant, si quelqu’un d’autre ouvre votre site web et que cette personne n’a pas installé la police, le navigateur affichera une police par défaut. Le résultat n’est généralement pas très présentable.

C’est là que les polices de caractères web deviennent utiles. Les polices Web permettent d’afficher n’importe quelle police sur un site Web également. Aujourd’hui, les formats WOFF et WOFF2 (pour les navigateurs plus modernes) sont courants. WOFF signifie “Web Open Font Format”.

# Licences

Si vous avez acheté une police sous licence, vous n’êtes pas automatiquement autorisé à l’utiliser sur le web. Les vendeurs de polices vendent des licences distinctes pour le web. Une alternative est offerte par les bibliothèques en ligne gratuites.

# Utilisation

Les polices Web peuvent être intégrées dans votre site Web sous forme de fichiers WOFF et WOFF2. Une alternative est proposée par Google Fonts ou Brick , où une balise <link> dans le <head> peut être utilisée pour intégrer la police de façon pratique. Vous apprendrez la deuxième variante.

Aussi peu de polices de caractères web que nécessaire

Les webfonts sont comme des bagages lors d’une randonnée en montagne: mieux vaut ne pas en prendre trop, mais seulement ce dont vous avez vraiment besoin. En général: utilisez le moins de polices et de styles de police possible, car chaque police et style de police rend votre site web plus lourd et plus lent à charger.

Exemple

Dans l’exemple suivant, nous utiliserons la police “Libre Franklin”, hébergée sur Google Fonts.

Allez à la page Libre Franklin sur Google Fonts.
Vous voyez différents styles de police, mais vous ne voulez mettre les titres de votre site web que dans une seule police. Par conséquent, pour le style de police “Bold 700”, sélectionnez le bouton “Sélectionner ce style”.
Dans votre “Selected Families” vous pouvez voir toutes les polices que vous allez intégrer. Google Fonts les regroupe pour que vous n’ayez jamais besoin d’intégrer qu’une seule balise <link>.
Copiez le code dans l’onglet “Embed” et collez-le n’importe où dans la section “head” de votre document HTML.

  <link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@700&display=swap" rel="stylesheet">

Vous pouvez maintenant utiliser la police “Libre Franklin” dans votre CSS avec la propriété “font-family”.

    h1 {
      font-family: "Libre Franklin", Arial, sans-serif;
    }

“Arial” est la deuxième police à utiliser si le navigateur ne parvient pas à charger “Libre Franklin”. Si Arial n’est pas non plus disponible, la police sans sérif par défaut du navigateur sera chargée (sans-serif).

Syntaxe Pour les polices avec un espace, il faut les mettre entre “guillemets”, c’est le cas de la “Libre Franklin”.

# Ressources

Polices web libres de droits herbergée par des tiers :