How to Add Custom Fonts in Unbounce Landing page

Please like and subscribe to the Youtube channel for more videos ->

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.


Unbounce 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.
  3. Your .htaccess file is available in the “File Manager” of your cpanel. You can edit the file and add this code. 
  4. NOTE: Please make sure not to update anything else in the .htaccess file.
				
					<FilesMatch "\.(ttf|otf|eot)$">

<IfModule mod

Header set Access-Control-Allow-Origin "*"

</IfModule>

</FilesMatch>
				
			

2. Write below code in your Unbounce page CSS. Make sure to start your CSS with style tag.

				
					
  @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 URL with your font URL on your domain or CDN */
  }
 
 /* Replace #lp-pom-text-449 with your text ID*/

  #lp-pom-text-449 {
 font-family: 'ADD THE FONT NAME HERE' !important; 

/* Replace the 'Dosis' with your font name created above */
    
  }
				
			

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 file.


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

Text element ID

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.


If you love Unbounce like I do, then you can sign up here to get 14-days FREE trial and get 20% OFF for the first 3 months.


Please let me know your comments below and what else you would like to see on the blog.

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