Search

Use a Google font in a landing page

💡 Good to know
Landing pages are available for Business and Enterprise 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:

  1. Go to https://fonts.google.coem/.
  2. Select the font family you want to use in your landing page.
    font-en_us.png
  3. Under the Styles section, add the styles you want by clicking Select "Name of style" +. The style will show up in the Selected family panel on the right:select-font-en_us.png
  4. 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.
    css_code_rules-en_us.png

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:

  1. Copy the CSS code for the Google font URL.
  2. 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.
  3. 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 "Roboto" from Google's font website (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️⃣ Add custom CSS to the landing page

  1. Go to Contacts > Landing pages.
  2. Select the landing page in which you want to use the Google font.

  3. In the landing page editor, click Settings in the bottom left corner.
    settings-en_us.png

  4. Open the Tracking tab.

  5. In the Head Tag, add your custom CSS.
    add_css-en_us.png

  6. Click Done.
  7. 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.

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo expert partner.

💬 Was this article helpful?

8 out of 26 found this helpful