How to use Google Fonts on your Teachable sales page

 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 within Teachable, there's no native way to use fonts that aren't 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.

2. Copy your font 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.


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!


6. Use your new fonts!

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.

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.

That's it! Save it and preview your 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! If you use this in your own Teachable school, drop a link in the comments so I can see!

Teachable, HTML + CSSErin Gibson