Using Custom Fonts in Your Funnels

Last updated:

If you wish to maintain consistency in the font or branding across your funnels and other platforms, Prisma Campaigns enables you to seamlessly integrate Google Fonts or other web-based fonts into your designs. It’s important to note that this feature is specifically for funnels and not applicable to email communications, which can only include web-safe fonts.

Adding a Google Font in a Landing Page

By following these steps, you can seamlessly integrate Google Fonts into your landing pages, ensuring a consistent and branded experience for your audience.

  1. Go to the Google Fonts website, select the font you want to use, and copy the embed code. The example shown in the image below uses Grandstander in its Thin 100 version.

    Choosing a Google font

  2. Click the pencil icon next to the landing page where you want to use the Google font and paste the embed code and the font-family CSS rule inside the <head> section. In this case, we are using Finovate Landing Page to illustrate.

    If you want to remove the warning in the builtin code editor, replace any ampersand characters with the corresponding HTML entity (&amp;). Otherwise, it will not affect the functionality of the font.

    Embedding the Google font in a landing page 

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Grandstander:wght@100&amp;display=swap" rel="stylesheet">
<style>
  * {
    font-family: 'Grandstander', sans-serif;
  }
</style>

  3. Save the landing page and publish the changes in the campaign(s) that use it.

Comparing the Funnel With and Without the Google Font

Before and after implementing a Google font in your landing page, consider the visual impact on your campaign funnel. The following images showcase a portion of the same landing page with and without the Google font, respectively.

Landing page with Google font

Landing page with default font

Upon comparing the two versions, you may notice small yet important differences in the visual appeal of your landing page. The touch of modernity that Google or other custom fonts provide can contribute to a more engaging user experience.