Adding Custom Fonts To Funnels Websites Step By Step Process

The CRM supports Google Fonts inherently, but for custom fonts, a bit more work is required. Here are the key points:

• Font Files: Fonts come in various file types, with .OTF (OpenType Font) and .TTF (TrueType Font) being the most common. However, for web use, the .WOFF2 (Web Open Font Format 2) is preferred due to its compatibility and compression features.
• Font Conversion: To use a custom font, it must be in the .WOFF2 format. This requires converting your .OTF or .TTF files using a service like Cloud Convert.

Hosting Your Custom Font

After converting your font file to .WOFF2, the next step is to host it online. Here's a simplified approach:

1. Upload the Font: Use the CRM's membership area to upload your .WOFF2 font file. This area allows you to store files which can be accessed via a URL.
2. Create a New Product: In the membership area, create a new product named, for example, "Font Files". This is where you'll upload your converted font file.
3. Obtain the Font URL: After uploading, publish your product and copy the URL of the uploaded font file. This URL is essential for the next steps.

Implementing the Custom Font in Your CRM Assets

With your font hosted and a URL in hand, you can now implement the custom font in your funnels and websites. Follow these steps:

Prepare the CSS Code: You need to write a small snippet of CSS code that tells the CRM to load your custom font. This involves specifying the font's name and the URL where it's hosted.

Example CSS snippet: css @font-face { font-family: 'YourFontName'; src: url('YourFontURL') format('woff2'); } Replace 'YourFontName' with the name you wish to assign to your font (e.g., 'Moonstone') and 'YourFontURL' with the URL you copied earlier.

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

Apply the Custom Font: To use the custom font on specific text elements, you can now simply refer to it by the name you assigned in the CSS snippet. This can be done through the CRM's visual editor, where you select the text element and apply the custom font.

Troubleshooting and FAQs

My custom font isn't displaying. What should I do?

• Ensure the font file URL is correct and publicly accessible.
• Double-check the CSS snippet for any typos, especially in the font name and URL.
• Make sure you've applied the custom font correctly in the CRM's visual editor.

Can I use multiple custom fonts?

• Yes, you can host and implement multiple custom fonts by repeating the steps for each font, ensuring each has a unique name in your CSS code.