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 :

Accédez à https://fonts.google.coem/.
Sélectionnez la famille de polices que vous souhaitez utiliser dans votre landing page.
Dans la section Styles, ajoutez les styles que vous souhaitez en cliquant sur Sélectionner « Nom du style » +. Le style s’affichera dans le panneau Famille sélectionnée à 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 respectivement les classes font-style-title, font-style-subtitle, font-style-head et font-style-normalText pour les styles de police de titres, sous-titres, en-têtes et textes dans votre landing page et spécifiez leurs familles.
Ajoutez la règle !important règle à 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 « Roboto» à partir du site Web de polices de Google (https://fonts.google.com/specimen/Roboto) :

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

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

Accédez à Marketing > Landing pages.
Sélectionnez la landing page dans laquelle vous souhaitez utiliser la police Google.
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 une agence partenaire Brevo.

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 ?