Aller au contenu principal

Utiliser une police Google dans une landing page

💡 Bon à savoir
Les landing pages sont disponibles avec les offres Business et BrevoPlus.

Cet article explique comment importer et utiliser une police Google dans une landing page.

1ïžâƒŁ RĂ©cupĂ©rer le code d’importation CSS

Pour rĂ©cupĂ©rer l’URL d’une police Google :

  1. Rendez-vous sur https://fonts.google.com/.
  2. Sélectionnez la famille de polices que vous souhaitez utiliser sur votre landing page.
    font-en_us.png
  3. Dans la section Styles, ajoutez les styles souhaités en cliquant sur le nom du style +. Le style s'affichera dans le panneau de Review sur la droite :select-font-en_us.png
  4. Dans la section Use on the web , sĂ©lectionnez l’option @import . Vous trouverez le code CSS de l’URL de la police Google ainsi que les rĂšgles CSS pour spĂ©cifier les familles.
    css_code_rules-en_us.png

2ïžâƒŁ Personnaliser votre CSS

💡 Bon à savoir
Ajoutez une police de secours au cas oĂč le navigateur ou le systĂšme de votre destinataire ne prendrait pas en charge la police Google importĂ©e. 

Pour créer votre CSS personnalisé :

  1. Copiez le code CSS de l’URL de la police Google.
  2. Utilisez les classes font-style-title, font-style-subtitle, font-style-head et font-style-normalText respectivement pour les styles de police Title, Subtitle, Head et Normal de votre page d'accueil et spécifiez leur famille.
  3. Ajoutez la rÚgle !important à la fin de chaque ligne de code pour vous assurer que toutes les rÚgles de style précédentes seront remplacées et que la police personnalisée affichée sur la version publiée de la landing page sera la bonne.

Dans l’exemple suivant, nous avons crĂ©Ă© le code CSS pour importer la police Google « Source Sans Pro » Ă  partir du site de Google Fonts (https://fonts.google.com/specimen/Source+Sans+Pro) :

<style> @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap');
.font-style-title {font-family:'Source Sans Pro', sans-serif !important; } .font-style-subtitle {font-family: 'Source Sans Pro', sans-serif !important; } .font-style-heading {font-family: 'Source Sans Pro', sans-serif !important; } .font-style-normalText {font-family: 'Source Sans Pro', sans-serif !important; } </style>

3ïžâƒŁ Ajouter un code CSS personnalisĂ© Ă  la landing page

  1. Dans l’éditeur de landing page, cliquez sur ParamĂštres dans le coin infĂ©rieur gauche.
    settings-en_us.png

  2. Ouvrez l’onglet Suivi .

  3. Dans la balise Head, ajoutez votre CSS personnalisé.
    add_css-en_us.png

  4. Cliquez sur Terminé.
  5. Si votre landing page a déjà été publiée, cliquez sur Lancer et publiez-la à nouveau pour prendre en compte vos modifications.

đŸ€” Vous avez des questions ?

Pour toute question, n’hĂ©sitez pas Ă  contacter notre service client en crĂ©ant un ticket Ă  partir de votre compte. Si vous n’avez pas encore de compte, vous pouvez nous contacter ici.