3 Ways To Use Custom Fonts To Generate Conversions
Close

3 Ways To Use Custom Fonts To Generate Conversions

Last updated on November 9, 2016 by Fahad Muhammad in Conversion Rate Optimization
Show Me The 35 Best Landing Page Tips

At Instapage, we believe in the power of customization.

Every feature we add, every template we create — we do it to make sure you continue to have a customizable landing page experience.

Our newest feature? Custom fonts.  

Why do you need custom fonts?

Custom fonts enable you to showcase your brand’s identity. They allow you to be unique and have a better chance for more conversions.

Your landing page’s font shouldn’t be randomly selected. Fonts are an extension of your brand and need to be treated just as careful.

Customized fonts give you all the freedom and flexibility you need to stand apart from the crowd and make a statement with your landing page.

How to add custom fonts to your Instapage landing pages

You can easily add custom fonts to all of your landing pages with one of following three ways:

Google Fonts

To start, find your desired font on Google Fonts:

This screenshot shows how to add custom fonts using Google fonts.

1. Click the “Quick Use” button:

This screenshot shows how Google Fonts' quick use can select font types.

2. Copy the first line of code you see on the page:

This screenshot shows which code to add to Google fonts' custom code.

3. Add the code to your page's HTML/CSS Header setting (you can find this menu under “Settings - HTML/CSS”):

This screenshot shows how to add HTML to the Header Setting in Instapage.

4. Copy the second line of code from Google Fonts:

This screenshot shows additional code needed for Google's Custom Fonts.

Add it below the code you’ve already added to your CSS Header Settings. To see what your code will look like, reference this Instapage Help Center article on custom fonts.  

5. Replace the bolded line of code with your code:  

This screenshot shows the code to replace on your landing page's header.

Upload fonts to your server

To start, upload your font files to your server: https://css-tricks.com/snippets/css/using-font-face/

Let’s say mydomain.com and your fonts are in a folder labeled “Fonts.” Your link will look something like this: "http://mydomain.com/fonts/FontName.woff."

Add your link to the final code. The Help Center article demonstrates what this code will look like when finished.

Now add it to your page's HTML/CSS Header setting like you did when adding a Google font.  

That’s it; you’re done!

Upload fonts to Dropbox

To start, upload your font files to Dropbox.

1. Share the Dropbox link:

This screenshot shows how to share your custom fonts using Dropbox.

The link should look like this:

https://www.dropbox.com/s/94os61r97mv3crf/Capsuula-webfont.ttf?dl=0

Before adding this into your code, replace the “www.” in your link with “dl,” so your code looks like this:

https://dl.dropbox.com/s/94os61r97mv3crf/Capsuula-webfont.ttf?dl=0

2. Add it to the final code, which will look something like this.

3. Add it to your page's HTML/CSS Header setting (you can find this menu under “Settings - HTML/CSS”) like you did when adding a Google font.

Your new font has just been added to your page!

Modern web fonts are taking over in 2016. Are you ready to join the club? Add a custom font to your landing pages today and see your conversion rate soar.

P.S.: Instapage offers you 40 of the most popular Google web fonts on your landing pages without copying or pasting any lines of code.  

Excited to try out new fonts on your landing pages? Sign up with Instapage today and take advantage of our 45-day free trial now.

Show Me The 35 Best Landing Page Tips
Sign Up for a 30 Day Free Trial
Join 250,000+ other businesses who rely on Instapage.
Get Started