💡 Good to know

Landing pages are available for Business and BrevoPlus plans.

In this article, we will explain how to import and use a Google font in a landing page.

1️⃣ Retrieve the CSS import code

To retrieve a Google font URL:

Go to https://fonts.google.com/.
Select the font family you would like to use in your landing page.
Under the Styles section, add the styles you want by clicking "Name of style"+. The style will show up in the Review panel on the right:
Under the Use on the web section, select the @import option. You'll find the CSS code for the Google font URL and the CSS rules to specify families.

2️⃣ Build your custom CSS

💡 Good to know

Add a fallback font in case your recipient's browser or system does not support the imported Google font.

To build your custom CSS:

Copy the CSS code for the Google font URL.
Use the font-style-title, font-style-subtitle, font-style-head and font-style-normalText classes respectively for Title, Subtitle, Head, and Normal body font styles in your landing page and specify their families.
Add the !important rule at the end of each line of code to ensure that all previous styling rules will be overridden and that the custom font displayed on the published version of the landing page will be the right one.

In the following example, we built the CSS code to import the Google font "Source Sans Pro" from Google's font website (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️⃣ Add custom CSS to the landing page

In the Landing Page editor, click Settings in the bottom left corner.
Open the Tracking tab.
In the Head Tag, add your custom CSS.
Click Done.
If your landing page was already published, click Launch and re-publish it to take your changes into consideration.

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.