Step-by-Step Guide to Adding Custom Fonts to Funnels Websites

While the CRM system natively supports Google Fonts, using custom fonts requires a few additional steps. Here’s a detailed breakdown of how to add your own custom fonts:

Understanding Font File Types

Fonts come in a variety of formats. The most common are:

• .OTF (OpenType Font)

• .TTF (TrueType Font)

However, the .WOFF2 (Web Open Font Format 2) is the recommended format for web usage because of its excellent compatibility and efficient compression.

Converting Font Files

To use a custom font, it needs to be in .WOFF2 format. If your font is in .OTF or .TTF, you’ll have to convert it. Tools like Cloud Convert are great for converting your font files to the required format.

Hosting the Custom Font

Once the font file has been converted, you’ll need to host it online to access it through the CRM. Here’s how you can do it:

1. Upload the Font: In your CRM’s membership area, upload the .WOFF2 font file. This area allows you to store files, each with its own accessible URL.

2. Create a Product for the Font: Set up a new product in the membership area, named something like "Font Files." Upload your converted font file under this product.

3. Retrieve the Font URL: After uploading, publish the product. Once done, you’ll be able to copy the URL associated with the font file, which you’ll need for the next steps.

Integrating the Custom Font into Your Website or Funnel

Now that your font is hosted and you have the URL, here’s how to implement it in your CRM assets:

Write the CSS Code: 
You’ll need a short piece of CSS code to tell the CRM where to find your font and how to use it.
Example CSS snippet:

@font-face {

    font-family: 'YourFontName';

    src: url('YourFontURL') format('woff2');}

1. Replace 'YourFontName' with the name you want to give your font (e.g., 'Moonstone') and 'YourFontURL' with the URL of your uploaded font.

2. Add the CSS to Your CRM: Go to the settings of the funnel or website page where you want to apply the custom font. Look for the Custom CSS section and paste your CSS snippet there.

3. Assign the Custom Font: To use the custom font on your text elements, simply refer to the font name you assigned in the CSS snippet. You can do this through the CRM’s visual editor, selecting the text element and applying your custom font.

Common Issues and Solutions

• Font not displaying correctly?

  • Verify that the font file URL is correct and publicly accessible.

  • Double-check the CSS snippet for any errors, particularly in the font name and URL.

  • Ensure that you have applied the font properly within the CRM's editor.

• Want to use multiple custom fonts?

  • Yes, it’s possible! Just repeat the process for each font, making sure each one has a unique name in the CSS.