Use custom fonts on your landing page

Learn how to use custom fonts on your ActiveCampaign landing pages. 

Pages is available on the following plans:

  • Plus
  • Professional
  • Enterprise

With ActiveCampaign, you can use custom fonts to your account so you can use them on your landing pages. Doing so helps you create a seamless brand experience for your page visitors and customers.

Take note

  • Uploading custom fonts to your ActiveCampaign account requires working knowledge of CSS
  • Custom fonts can only be used on your landing pages
  • For now, the Pages builder will not show the custom font. To see the custom font in action, you will need to publish and view the page's live link

Upload custom fonts to your ActiveCampaign account

In order to use custom fonts on your landing page, you will need to first upload your font file to the Pages file manager. You will then need to add CSS to the settings for each page that will use custom fonts.

1. Create a file of the custom fonts you wish to upload into your ActiveCampaign account. These files are usually in a .otf or .tff file format. 

2. Upload and convert your fonts on the Transfonter website.

  • Go to the Transfonter website
  • For the checkboxes on the right side, make sure that only WOFF and WOFF2 are selected
  • Click the "Add fonts" button at the top then select your fonts file
  • Click the "Convert" button to convert the fonts

3. Upload both font tiles to the Pages file manager.

  • Click "Site" on the left menu then click "Pages"
  • Click the "Files" tab
  • Click the "Upload" button

4. Copy the path for each font file.  

  • In the Pages file manager, right-click the WOFF font file and click "Get Link"
  • Copy the URL that appears and keep it handy
  • Repeat this process for the WOFF2 font file

5. Locate the page you wish to use custom fonts with and access its settings.

  • From the File Manager, click the "Pages" tab
  • Hover your mouse over the landing page you want to work with
  • Click "View Page Settings"

6. Next, copy the following CSS code

<style>
    @font-face {
      font-family: 'Font name';
  src: url('') format('woff2'),
    url('') format('woff');
      font-weight: normal;
      font-style: normal;
    }
   
    h1,h2,p {
        font-family: 'Font name', sans-serif !important;
    }
</style>

7. Paste the code into the <head> section of the "Custom Code" area of your page's settings.

Default

8. "Font-family" can be any name you'd like to use. Make sure what is set in the first "font-family" matches exactly the same name set in the last "font-family."

9. Copy and paste the file path URLs (step 4 above) into the appropriate slots within the @font-face CSS. 

10. The second block of CSS tells your page which headline and text tags to use the custom font. You can use h1, h2, h3, h4, h5, h6, and p.

The custom font will overwrite all text on the landing page that makes the headline or text tag. For example, if I set the custom font to "p", all text on the page marked as "Paragraph" will be replaced with my custom font.

11. When finished, click the "Save" button

Was this article helpful?
1 out of 1 found this helpful

Have more questions? Submit a request

Start free trial