Skip to main content

Custom Fonts in the Site Builder

Charie

Follow these steps to learn how to customize the font in your funnel or website, using a few different methods.

 

There are custom fonts available by default within a funnel. Just click on the paragraph, click on typography settings and then select a font family to accomplish this.

 

Available Default Custom Fonts in Sites

There are four elements that you can use within funnels for text with different styles.

  • Navigate to Sites and edit the desired page.

  • Add sections, rows, and elements to your preference

  • Click on an element to highlight it and modify the text with the menu at the top

  • Navigate to the “Settings” button at the top of the builder.

  • Click into Typography.

  • Choose the native Headline and Content fonts that will be used throughout the funnel.

  • Click on a specific element to modify the text typography.

  • Choose a font family

  • Choose a Google Font

 

Custom Fonts in the Site Builder Using CSS

If you have the expertise, using custom CSS allows you to completely customize the funnel/website beyond standard options. CSS, or Cascading Style Sheets, is the technology used by most websites to create visually engaging web pages, including aspects such as the layout, colors and fonts.

 

Please Note: You may need to reach out to a developer for assistance if you don’t have the expertise.

 

Method 1: Add code

  • Navigate to the funnel builder and edit the funnel.

  • Click on Settings > Tracking code and use code similar to this method:

Method 2: Using the CSS selector

You can uniquely modify a specific element by using the CSS selector instead

 

Method 3: Importing with CSS/HTML

You can use either the CSS @import rule or HTML <link> tag. 

To make use of HTML in the Site Builder use the HTML element

 

 

First, we'll explain how to import the font you want. Google Fonts can generate the code automatically based on the font that you want to add to your webpage. Open Google Fonts and follow these steps:

  1. Find the font and click it (a card with the font), then, click "+ Select this style". 

  2. On the right side, you'll see a container with the name "Selected family".

  3. Click "Embed" and choose <link> or @import depending on where you need to add the font (in HTML or CSS).

  4. Copy/paste the codes you need.

  • Import the “Muli” and “Quicksand” Google Fonts for the <body> and <h1>, respectively.

  • Specify the font-family for each of the elements (<body> and <h1>).

  • Style the two elements separately using the following properties: color, font-weight, font-style, font-size, line-height, letter-spacing, and other properties.

  •  

 

Here is an example of how this would look:

CSS

@import url('https://fonts.googleapis.com/c...');

@import url('https://fonts.googleapis.com/c...');

body {

  font-family: 'Muli', sans-serif;

  color: rgba(0, 0, 0, 0.8);

  font-weight: 400;

  line-height: 1.58;

  letter-spacing: -.003em;

  font-size: 20px;

  padding: 70px;

}

h1 {

  font-family: 'Quicksand', sans-serif;

  font-weight: 700;

  font-style: normal;

  font-size: 38px;

  line-height: 1.15;

  letter-spacing: -.02em;

  color: rgba(0, 0, 0, 0.8);

  -webkit-font-smoothing: antialiased;

HTML

It is also possible to import Google Fonts using the HTML <link> tag. You must add it to the header.

Use <h1> as a heading tag and write content in a <p> tag.