How to Add Custom Fonts in Clickfunnels Landing page

Your landing pages are part of your brand so they should have the similar fonts, graphics and color theme to match your brand.

 

You don’t always get your brand fonts in Google fonts, so either you’ve to find the similar looking fonts in Google Fonts or use custom fonts instead.

 

Clickfunnels or any other landing page platform doesn’t offer this feature yet to upload your custom fonts in your landing pages.

But you can now use custom fonts with the help of some CSS and instructions below.

 

The following code and trick can be used in any landing page platform and it will definitely work.  I have tried it in Unbounce, Instapage, Clickfunnels and many other.

 

Please follow the steps written below:

1. Upload your font file to your server or a CDN ( Content Delivery Network )

Unbounce doesn’t allow you to upload fonts so you’ll have to upload it to your web hosting or CDN like Amazon S3 or Max CDN.

 

Amazon S3 offers upto 5 GB of FREE storage so you can use it upload your fonts and other files as well.

 

In case you would like to use your hosting or website to upload the font, then it may not work in Chrome browser because of the rendering issues, so you should do the following to make it work.

  1. Go to your cpanel and look for the .htaccess file
  2. Add the following code in your .htaccess file and save it.
				
					<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"

</IfModule>
</FilesMatch>
				
			

2. Write below code in your Clickfunnels page CSS.

				
					@font-face {
    font-family: 'YOUR FONT NAME HERE'; /* Add the name of your font here */   
    src: url('YOUR FONT FILE URL HERE') format('truetype');
 /* Replace the 'YOUR FONT FILE URL HERE' with your font URL on your domain or CDN */
  }
 
 /*Use the above create font-family name as below in your page*/

  #section-1200 {
 font-family: 'ADD THE FONT NAME HERE' !important;
 
 /* Replace #section-1200 with your element ID /*
 
 /* Replace the 'ADD THE FONT NAME HERE' with your font name created in the first step */ }

				
			

3. Replace “YOUR FONT NAME HERE” with a name or word you would like to give you to your font. It’s like giving a name to your page or file.

4. Replace “YOUR FONT FILE URL HERE” with the URL of your font file.

5. Replace “#section-1200” with the your font ID. That you can find on the bottom right of the screen when you select the element.

id in clickfunnels
unbouncehacks clickfunnels css
custom css in clickfunnels
clickfunnels custom css

6. Save your page and republish it to see the changes live.

That’s it. You should see the custom fonts working on your page.

Leave a Reply

Your email address will not be published. Required fields are marked *

Picture of Sahibjot Singh

Sahibjot Singh

Hey there! I'm Sahibjot Singh, and I've been on an exciting journey as a Web Designer/Developer and Email Automation expert for the past 12 years. It's been a fantastic ride filled with new challenges, and I've learned how to overcome various issues along the way.

One thing that's always been a part of my journey is the need to research and gather different puzzle pieces, using my coding knowledge to piece together solutions for a wide range of problems.

But here's the thing: I've realized that there are many business entrepreneurs and non-technical folks out there who don't have coding skills but often find themselves in similar situations.

So, what makes Unbouncehacks/Unbouncetips special? Well, it's not just a collection of scattered information. I've put together complete end-to-end solutions for the very problems I've encountered and that you might face in the future.

Plus, I keep this website updated with fresh tips and suggestions that have helped me excel in design and email marketing over the years. So, you're in for a treat with a treasure trove of knowledge! 🚀

Share:

Facebook
LinkedIn
Twitter
Skype
WhatsApp

Most Popular

Follow Us

Categories

Doing the best for email marketing? Still your domain can be black listed if you hit a spam trap, once.


Verify your contacts for FREE and make sure there are no spam traps or invalid emails. 

Read More

Related Posts

― Receive the latest articles
Subscribe To Our Newsletter

Get notified about new articles