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.
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.
You can easily add custom fonts to all of your landing pages with one of following three ways:
To start, find your desired font on Google Fonts:
1. Click the “Quick Use” button:
2. Copy the first line of code you see on the page:
3. Add the code to your page's HTML/CSS Header setting (you can find this menu under “Settings - HTML/CSS”):
4. Copy the second line of code from Google 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:
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!
To start, upload your font files to Dropbox.
1. Share the Dropbox link:
The link should look like this:
Before adding this into your code, replace the “www.” in your link with “dl,” so your code looks like this:
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.