How to use Google Fonts on your Teachable sales page

If you’re looking to keep your branding consistent between your website and your Teachable sales page, matching colors and slapping a logo on it isn’t enough. You need to use the same fonts. But what if you’re using Google Fonts on your website?

Within Teachable, there’s no native way to use Google fonts. You’re limited to the fonts included with their editor. Womp womp.

In my last post, I explained how to use fonts that you’ve downloaded or purchased that aren’t available via Google fonts, and that process involves a few extra steps.

I’ve explained it here: How to use custom fonts on your Teachable sales page

If your fonts ARE available via Google Fonts, the process is a little simpler.


1. Head to Google Fonts and find the font you’d like to use.

Once you’ve found it, click the little red plus sign to select it. I’m going to be using Lora.

Choose a font from Google Fonts

2. Copy your Google Fonts embed code

When you click on the plus sign, you’ll be presented with this fun little drawer containing the code you’ll need to use this font.

To make sure you’re getting all versions of the font (regular, italic, bold) click on the “Customize” tab and tick all the boxes.

Then, copy the “Standard” embed code.

Copy your Google Font embed code

3. In Teachable, navigate to Site > Code Snippets

Paste the code you just copied into both the “Logged In” and “Logged Out” box.

The save it!

In Teachable, go to site - code snippets

6. Use your new Google Fonts on your Teachable sales page!

Unfortunately, this method will not make your new font populate in Teachable’s font dropdown in the editor. You’ll still have to fuss with a little more code, but this part is the easiest.

Head back to your sales page. Type some text in the editor, highlight it, and in the “Change Font Family” dropdown, select any font. I’m using Helvetica.

Use your Google fonts on your Teachable sales page

Then, flip over to code view using the button with the little brackets <>.

Find the word “Helvetica” and change it to the name of your font.

Change the name of your font to your Google Font in the code editor

That’s it! Save it and preview your sales page.

Preview your Google Fonts on your Teachable sales page

Once you’ve set this up in the CSS for your school, every time you need to apply this to a new sales page, you can start at Step #6.

There you have it! Enjoy your new, beautiful fonts!

How to use Google Fonts on your Teachable sales page

Hey, I'm Erin.

If you're ready to turn your 1-on-1 services into a digital product, you're in the right place!

I help coaches and freelancers turn their one-on-one services into polished, profitable online courses, so they can live life on their own terms.

Do you need to sell services before launching an online course?

Do you need to sell services before launching an online course?

I get this question all the time: "I want to create an online course, but I'm not sure if I'm "there" yet in my business. Do I need to start with services?" And my answer is: No, you don't have to start with services before creating an online course. BUT YOU PROBABLY...

What goes into an online course welcome email?

What goes into an online course welcome email?

Ah, the welcome email. Such a simple thing. So often overlooked when you're building an online course. Your welcome email is basically the “Quick Start Guide” for your online course, and it is absolutely integral to not only making sure that your students have a good...

5 reasons your sales page is killing your online course

5 reasons your sales page is killing your online course

It punches you in the gut. You create an amazing online course, and you jam it full of all of your knowledge and best tips and tricks and sprinkle in so much love. Creating courses is not for the faint of heart. I don’t care if you’re teaching accounting or knitting....

Pin
Share
Tweet
Share