Comment utiliser des polices personnalisées sur votre site

Comment ça marche

Si vous ne souhaitez pas utiliser les polices par défaut disponibles dans Site Builder, associez différentes polices du catalogue Google Fonts pour les en-têtes ou le corps du texte via un code HTML personnalisé. Pour ce faire, utilisez une solution existante ou ajoutez votre propre code.

Comment configurer

Utiliser une solution existante

1. Ouvrez votre projet dans le Compte éditeur.
2. Dans la barre latérale, cliquez sur Site Builder.
3. Cliquez sur Open Site Builder.
4. Insérez l'URL de la police dans le bloc Custom code et spécifiez les classes de style pour lesquelles la valeur font-family doit être modifiée.

Exemple de modification de la police d’en-tête

<style>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

  .custom-header-font h1,
  .custom-header-font h2,
  .custom-header-font h3,
  .custom-header-font h4,
  .custom-header-font h5,
  .custom-header-font h6 {
    font-family: 'Playfair Display';
  }
</style>

Exemple de modification de la police du corps du texte

<style>
  @import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

  .custom-main-font {
    font-family: 'Playfair Display';
  }
</style>

5. Cliquez sur Preview pour voir vos modifications.

Regardez le tutoriel vidéo pour ces instructions :

Ajouter votre propre code

1. Dans le constructeur, cliquez sur Add block et sélectionnez Custom code.

2. Insérez votre propre code dans le bloc.

Liens utiles