LEVEL UP

Digest

blog image

Adding Custom Fonts To High Level

January 25, 20238 min read

Adding a custom font to High Level takes your design to the next level.

In this post, I will show you how to add your fonts and how to use them within the app inside both funnels/websites along with the member’s area.

High Level has most Google Fonts loaded in the app but sometimes we want a different Google font or need a different Google font weight or we have our own brand font we want to use within the app to represent our visual brand better.

I recommend you choose, at minimum 1 Google font, and 2, is even better - one for headlines and another for the body as copy design is so important.

If you prefer to watch:


Interested in learning how to create another revenue stream with white-labeled software.

This is my FREE signature course to get you started on the path to building your SaaS Business

The SaaS CodeThe SaaS Code GHL

Click Here & Get Started Today!

Choosing Your Brand Fonts

If you haven’t chosen any fonts yet you can go to: fonts.google.com

There is a large selection and you can try them out to see if they fit your brand feel. 

I find letters like g, f, t, etc will display differently with different fonts so be sure it is to your liking.

Next, you will want to ensure the Google Fonts you have chosen are in High Level.

To do so you can check here:

Inside the funnel → Settings → Typography → in the font drop-down menu search to be sure your brand fonts are there.

If you would like a different font than what you can find in Google Fonts I’ll show you in the next step a few of my favorite places for fonts.

Step 1:

Next, let’s grab the CSS and HTML code you need for your Google fonts.

As mentioned, if the Google font you have chosen is not natively in GHL you will find the code needed here: fonts.google.com

With Google fonts, you can also download them to your computer and add them to your font book to use in Photoshop, etc.

This is my example font Allison.

<style>

@import url('https://fonts.googleapis.com/css2?family=Allison&display=swap');

</style>

font-family: 'Allison', cursive;


Next, we need to create the CSS Custom Class code you need. This is my example below for Allison.

.allison {

font-family: 'Allison', cursive !important;

}

You need to add the .[FONT NAME] before the brackets and add “!important” before the last semicolon.

If you have added a different font weight you would replace the font-weight code with yours:

font-weight: 600 !important;

Allison only has 1 font-weight.

Ready To Get Started With Go High Level NOW? Click here for your FREE 30-Day Trial

Step 2:

Gather any other font files you need.

Most brands I work with have a font that is not a Google Font and they need to add the font to use it inside High Level.

Two resources for fonts I use regularly are:

I like Font Squirrel for free web fonts.

A great place to purchase custom fonts is Creative Market

If you have purchased a font be sure you have chosen the correct license for how you will be using the font.

I chose Stylish from Creative Market with 10,000 web views a month for $19.00.

Goghighlevel Custom Fonts 1

This will keep the “lawyers” away.

In the next step, I will show you how to get and create the code needed for your custom fonts.

Step 3:

Now, let’s create the code you need for your custom fonts that are not Google Fonts.

For your custom font, you will need a few variations of the font file.

The reason is some people have an older computer or are using an older browser so to be sure your beautiful fonts load on all devices we will need to take your font files and convert them to these file types:

  • WOFF

  • WOFF2

I use Cloud Convert to convert my font files as needed. 

When you purchase a font you usually get all font versions but in case you need to convert you can go here:

https://cloudconvert.com/

The files will be downloadable to your computer.

Step 4:

Create a Product in the membership area within High Level to host your custom font files.

You have purchased a custom font or found one to use and we now need to host the files somewhere. With Google fonts, Google “hosts” those files for us but for the custom fonts we need to host them ourselves.

You can do this on AWS - Amazon Web Services aws.amazon.com but this is a more complicated but also more secure way of hosting your font files.

For this example, I am going to show you how to host your font files on Go High Level for ease and convenience.

Create a Membership Product and name it [Company Name] Custom Font Files.

I add an image of the font so I remember which font it is.

Goghighlevel Custom Fonts 2

Upload the fonts to your member’s area.

Make sure you have the “preview” link as the files need to be downloadable.

Copy the font file link and paste it into your browser and hit enter. If the file downloads, you have the correct link.

Step 5:

You are now ready to create the code for your custom fonts.

Get the font link(s) and create your custom code. I paste my font code into a Google Doc so it is easy to grab.

Here is the base CSS code:

@font-face {

  font-family: 'FONT NAME';

  src: url('YOURFONTURL') format('woff2'),

       url('YOURFONTURL') format('woff'),

       url('YOURFONTURL') format('truetype');

}

  

Create your Custom Class

.LABEL {font-family: FONTNAME !important;

  font-weight: normal;

   font-style: normal;

}

Here is the code for the “Stylish” custom font I created.

Ready To Get Started With Go High Level NOW? Click here for your FREE 30-Day Trial

Step 6:

How To Add The Custom Font Code To Your Funnels

First Up Google.

How To Add Custom Google Fonts To High Level

There are a couple of different ways you can add the code needed for Google fonts to your funnel.

For this example, I am going to add the HTML code to the “header” section of the funnel at the “funnel” level settings and the CSS at the “step” level of the funnel.

You can add all the code needed for your Google Fonts, the HTML, and CSS in the “funnel” level settings. The reason I add the CSS at the “step” level is so I can see the font changes in the editor. 

This makes it easier for me to design.

At the “funnel” level, you need to add HTML in the “Head” section of the funnel.

HTML code needs to sit in between “style” tags.

<style>

</style>

To add CSS code to the “step” level you would add it inside the funnel step by going to Step → Settings → Custom CSS and pasting the code there.

How To Add Your Custom Font Code To Your Funnels

The code for your custom fonts - not Google fonts - is added to the step-level settings.

You would add all the code you created in Step 5.


Step 7:

Adding Custom Code To The Member’s Area

A few different steps are needed to add custom code to your member’s area.

The reason is we do not use “elements” like we do in the funnel/website editor that we can add the “Custom Class” to so we need to target the fonts we want to change differently.

We do this by adding more CSS.

We would target the H1, H2, etc selectors.

We would add the same code as we did in the funnel and this additional code:

Raw CSS Files

/* CUSTOM FONT FILES */

@font-face {

    font-family: YOURFONTNAME;

    src: url('YOURFONTFILE') format('woff2');

}

/* CREATE YOUR CUSTOM CLASS */

.YOURFONTNAME {

    font-family: YOURFONTNAME !important;

    font-weight: normal;

    font-style: normal;

}

/* CUSTOM MEMBERSHIP FONT FILES */

h1, h2 {

    font-family: YOURFONTNAME !important;

    font-weight: normal;

    font-style: normal;

}


h2 {

  font-size: 40px !important;

}

Ready To Get Started With Go High Level NOW? Click here for your FREE 30-Day Trial

My Example

/* CUSTOM FONT FILES */

@font-face {

    font-family: sig;

    src: url('https://firebasestorage.googleapis.com/v0/b/highlevel-backend.appspot.com/o/memberships%2Fan6rdXsWkJUCX3G3GJup%2Fpost-materials%2F522ee930-6987-4c7d-af2c-b723bc047417%2FStylishSignature.woff2?alt=media&token=1cf87f3b-125c-42fd-a297-89acdc4a6034') format('woff2');

}

/* CREATE YOUR CUSTOM CLASS */

.sig {

    font-family: sig !important;

    font-weight: normal;

    font-style: normal;

}

/* CUSTOM MEMBERSHIP FONT FILES */

h1, h2 {

    font-family: sig !important;

    font-weight: normal;

    font-style: normal;

}

h2 {

  font-size: 30px !important;

}


Add the Google font HTML code to the member’s area as well.


Step 8:

How to use the custom fonts moving forward.

I keep my custom code in a document so I can refer back to it as I build out new funnels.

You can also copy and paste from one funnel to another all the code you need at the “funnel” level like your tracking codes etc.

Remember to use your custom class and add the H1, H2, etc to the membership code, and your funnels and membership area will look amazing and represent your branding beautifully.

Happy Designing.

Now you will have a beautifully designed funnel and member’s area!



_________________________________________

Already a Go High Level user and it is time to upgrade to PRO - I got you!

When you upgrade to the Pro Plan you will be given access to my signature Go High Level Affiliate Offer - The SaaS Suite.

The SaaS Suite

Which includes:

  • The SaaS Code Course

  • The Go High Level Training Code Course

  • The SaaS Set Up - fully done for you

  • Onboarding Checklists

  • Snapshots

    • Coaching Snapshot

    • Your SaaS Snapshot

    • Support Snapshot

  • Access to our exclusive Go High Level Now Facebook Group with 2 weekly calls with me

As my affiliate, you are also given access to ME as your personal GHL Consultant.

And so much more!

What Are You Waiting For - Let’s DO This - Together.

Click Here To Get Started Today.

Blog Post Out

The Fine Print: Some of my links are sponsored or affiliated and I may make a commission when you buy at no additional cost to you ✨

She has over 10 years of experience as a teacher, trainer, and coach, helping powerhouse entrepreneurs innovate and grow. Pamela is an official HighLevel™ Partner, certified as a Master Marketer by Funnel Gorgeous Society™, and trainer for some of the biggest names in the online education industry, including Peng Joon, Lori Kennedy, Jody Milward, and Julia Taylor. She believes that the only way to run a profitable (and freedom-oriented) business is to add a monthly recurring revenue stream. Pamela lives by the beach in Mexico with her husband, eats tacos every day, and loves helping amazing entrepreneurs change the world.

Pamela Dale

She has over 10 years of experience as a teacher, trainer, and coach, helping powerhouse entrepreneurs innovate and grow. Pamela is an official HighLevel™ Partner, certified as a Master Marketer by Funnel Gorgeous Society™, and trainer for some of the biggest names in the online education industry, including Peng Joon, Lori Kennedy, Jody Milward, and Julia Taylor. She believes that the only way to run a profitable (and freedom-oriented) business is to add a monthly recurring revenue stream. Pamela lives by the beach in Mexico with her husband, eats tacos every day, and loves helping amazing entrepreneurs change the world.

Back to Blog
Drop Down

YOU ARE GUNNA LOVE

These Freebies

Are you craving consistent revenue every month?

How To Client-Proof Your Business With White-Labeled Software

The fastest growing business model for new and seasoned business owners alike.

Pamela Dale Logo

Powered By High Level

Facebook
TikTok
YouTube
Instagram

Hey, you!

I'm glad you stopped by.

Grab a coffee, hang out for a while,

and see how I can help you.

Or maybe Level Up by

© 2024 All Rights Reserved - Terms and Conditions - Privacy Policy - Disclaimer

Pamela Dale International may receive affiliate compensation for some of the links on this site at no additional cost to you. You can read my Affiliate Disclosure Statement in my Privacy Policy.

This website is not intending to provide financial advice. This is for entertainment only.