💡 Bon à savoir

Les landing pages sont disponibles avec les offres Business et Entreprise.

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 :

Rendez-vous sur https://fonts.google.com/.
Sélectionnez la famille de polices que vous souhaitez utiliser sur votre landing page.
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 :
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.

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é :

Copiez le code CSS de l’URL de la police Google.
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.
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

Dans l’éditeur de landing page, cliquez sur Paramètres dans le coin inférieur gauche.
Ouvrez l’onglet Suivi .
Dans la balise Head, ajoutez votre CSS personnalisé.
Cliquez sur Terminé.
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.

Si vous avez besoin d'aide pour un projet impliquant Brevo, nous pouvons vous mettre en relation avec un Partenaire Brevo certifié.

Utiliser une police Google dans une landing page

1️⃣ Récupérer le code d’importation CSS

2️⃣ Personnaliser votre CSS

3️⃣ Ajouter un code CSS personnalisé à la landing page

🤔 Vous avez des questions ?

💬 Cet article vous a-t-il été utile ?

Recherche

Utiliser une police Google dans une landing page

1️⃣ Récupérer le code d’importation CSS

2️⃣ Personnaliser votre CSS

3️⃣ Ajouter un code CSS personnalisé à la landing page

🤔 Vous avez des questions ?

💬 Cet article vous a-t-il été utile ?