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:
Find the font and click it (a card with the font), then, click "+ Select this style".
On the right side, you'll see a container with the name "Selected family".
Click "Embed" and choose <link> or @import depending on where you need to add the font (in HTML or CSS).
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.
