Les polices Web sont des polices qui ne sont pas déjà installées sur le système d'exploitation de l'utilisateur, mais qui sont hébergées sur le Web et téléchargées par le navigateur pour être utilisées. Cela vous donne la flexibilité d'utiliser n'importe quelle police de votre choix, à condition de les fournir sous forme de fichiers de polices (soit une URL, soit un chemin d'accès). Ces polices sont souvent fournies sous licence, ce qui signifie qu'un client devra acheter le droit d'utiliser les polices sur son site.

Vous pouvez ajouter deux types de polices à la recherche :

1. Polices hébergées par un fournisseur de polices, tel que Google Fonts et Adobe Fonts, qui sont gratuites et ne nécessitent pas de licence.
   1. Votre hébergeur vous fournira un extrait de code qui inclura à la fois les ressources de la police et les déclarations font-face pour vous. Cela prendra la forme d'une feuille de style — référencée comme ci-dessous, avec l'élément href qui fait référence aux polices externes.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&display=swap">

2. Polices auto-hébergées, typiquement les polices que vous possédez, le cas échéant.
   1. Ce sont des fichiers de polices que vous chargez dans la recherche.
   2. Les types de format acceptés sont :
      • WOFF (Web Open Font Format)
        • Recommandé car ces fichiers sont compressés pour une meilleure transmission sur de faibles connexions Internet et sont généralement pris en charge par différents types de navigateurs.
      • WOFF2
      • TTF (TrueType)
      • OTF (OpenType)
      • EOT (Embedded OpenType)
      • SVG (Scalable Vector Graphics)

Pour ajouter des polices web à votre site :

1. Cliquez sur Pages dans la barre de navigation, puis sur le site souhaité.
2. Cliquez sur le bouton Afficher l'éditeur de code.
3. Survolez la branche master et click sur l'icône en forme de crayon () qui apparaît.
4. Ajoutez les polices à votre éditeur de code. Ce processus varie en fonction de la façon dont les polices sont hébergées. Veuillez suivre les étapes qui correspondent à votre situation :
   • Polices hébergées par un fournisseur de services de polices
     1. Cliquez sur le dossier layouts.
     2. Cliquez sur le fichier headincludes.hbs.
     3. Ajoutez vos scripts de police souhaités au fichier.
   • Polices auto-hébergées
     1. Cliquez sur le dossier static.
     2. Cliquez sur le dossier assets.
     3. Survolez le dossier fonts, cliquez sur les trois points (…) qui apparaissent, puis cliquez sur Add File (Ajouter un fichier) dans le menu déroulant. Une boîte de dialogue apparaît.
     4. Sélectionnez Charger un fichier existant dans la liste déroulante.
     5. Cliquez sur Choisir un fichier et sélectionnez le fichier depuis votre ordinateur. Ensuite, cliquez sur Ajouter un fichier.
        • Si vous avez plusieurs fichiers à ajouter, répétez les étapes c à e. Veuillez noter que vous devrez charger un fichier pour chaque variante de police (par exemple, normale, gras et italique).
     6. Cliquez sur le dossier scss sous le dossier static.
     7. Cliquez sur le fichier fonts.scss.
     8. Ajoutez vos déclarations de font-face souhaitées en haut du fichier.
        • Vous devrez ajouter une déclaration de font-face pour chaque variante/fichier que vous chargez — dans notre cas, normal, gras et italique.
        • Le src fait référence au chemin d'accès des fichiers que vous venez de charger dans votre dossier Fonts.

@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-regular-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  font-style: normal;
}
@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-bold-webfont.woff') format("woff");
  font-weight: $font-weight-bold;
  font-style: normal;
}
@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-italic-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  font-style: italic;
}

5. Appliquez votre nouvelle police à votre expérience de recherche. Consultez l'article d'aide Changer les polices dans le thème de l'interface de recherche pour en savoir plus.