How to add your own Google Font to your landing pages in SharpSpring

Adding a custom font to your landing pages is important in communicating your brand identity to your audience. In this guide we show you how to do it

Share this:

By: Neal Dyer on 28th May 2021, 2 minute read

SharpSpring landing pages allow you to choose between six fonts by default:

  • Arial
  • Georgia
  • Impact
  • Tahoma
  • Times New Roman
  • Verdana

That’s not great if you are looking to stand out from the crowd and want to implement the font your brand manager and marketing team spent months choosing.

Fortunately, you can get the font you want for your landing pages in SharpSpring by adding a Google Font.

Here’s how:

PrimeStox

Case Study: PrimeStox

How we helped PrimeStox treble registrations while reducing spend in just two months.

The first thing you need to do is select your font from fonts.google.com.

You can search for a font by name or use one of their filters to help choose one.

Google Fonts for SharpSpring Landing Pages.png

When you have selected the font you want, you need to choose the style by clicking on + Select this style.

select the style sheet in Google Fonts for SharpSpring.png

You then need to select @import and copy the contents of the <style></style> tags

import copy style tags in Google Fonts for SharpSpring.png

Go back to your landing page and select Edit Code.

Edit code in SHarpSpring landing pages to add Google Font.png

Then select the Head section of your page.

head tag in SharpSpring landing pages.png

And paste the code.

paste code in SharpSpring landing pages.png

Next, return to fonts.google.com and copy the CSS rules to specify families

css rules to specify families in Google Fonts.png

Return to the head of your code in SharpSpring and paste the code above the closing </style> tag.

Google Fonts css in SharpSpring.png

When you have done that you will need to specify the Headings and Paragraph tags that the new font relates to.

Case Study: Peer to Peer Business Lender

How we developed a unique targeting approach and improved lead volumes from direct marketing by more than 80%.

For example, if you want your font to show for H1 tag, then you need to add the following to your code:

h1 {

font-family: 'Open Sans', sans-serif;

}

If you also want your H2 tag to be the same font, you would do the same underneath but with h2 instead of h1

h2 {

font-family: 'Open Sans', sans-serif;

}

If you want to add the font to all of your headings and paragraph, it would look like this:

Header and Paragraph tags for adding Google Fonts to your SharpSpring landing pages.png

Once you have done that, click Save & Close and your new font will now be displayed on the text of your landing page.

If you would like to find out how to add two or more different fonts to your landing page, take a look at the how to video on our YouTube channel.

If you need help getting the most out of SharpSpring, visit our SharpSpring Hub to find out how we can help.

ribbon_platinum.png

Share this:

Neal Dyer

Author

Neal Dyer

Our leader in CRM and Marketing Automation, Neal is responsible for The Marketing Eye being recognised as one of the few Platinum Certified SharpSpring agencies in the UK.

Campaign Manager / The Marketing Eye

Related Reading

5 steps to marketing maturity

Blog: 5 steps to marketing maturity

by Neil Edwards, 4 minute read