How to use custom fonts on your Teachable sales page

How to use custom fonts on your Teachable sales page

Teachable is hands-down my favorite platform for Ecourse creation, and their sales page editor is vastly superior to Thinkific and a lot of other competitors. You don't need to know any code to create an attractive sales page in Teachable ...

... But if you want to create a drop dead gorgeous sales page, it helps.

That brings us to fonts.

One thing that has always bugged me is Teachable's selection of fonts: Arial, Helvetica, Georgia, Times New Roman, Monospace, Proxima, Alegreya, Lato, Lucinda Sans Unicode, Merriweather, Open Sans, Palatino, Raleway and SourceSansPro.

So you have choices, and if you want a simple sales page, this selection of fonts is probably sufficient.

But if you want to match your Teachable school to your other branding on your website and that branding uses custom fonts, you're out of luck. You have to create graphics of all that text and put it into the Teachable editor as pictures, which is janky as hell, a pain in the ass to edit later, and bad for SEO.

But I found a solution! This was a tough nut, but I finally cracked it and I'll show you how to do it.

If you want to use custom fonts that are available for free from Google Fonts, the process is a whole lot simpler.

I've explained that in this post: How to use Google fonts on your Teachable sales page

In this case, the fonts I want to use are not available from Google Fonts. I need to use Wallows and Engravers MT, which are my client's brand fonts.

Here's what we do.


1. Create a new course in Teachable.

You won't be publishing it, so just name it something you'll remember not to delete. I've named mine "Testing (don't delete)" to be nice and obvious.


2. Create a new lecture in your course

It doesn't really matter what you call it. I've named my section "Custom Fonts" and I've named my lecture "Wallows and Engravers". Again, it's not necessary to publish anything.


3. Drag your font files into this lecture

In the Add File tab, drag in the font files you want to use, one at a time. You'll need them to be in OTF or TTF format.


4. Copy the direct link to your fonts

Once they're uploaded, you can get this link by hovering over your font file, right-clicking and choosing "Copy Link Address". Then paste those direct links into a text file - you'll use them in a minute.


5. In Teachable, navigate to Site > Code Snippets > CSS

You're going to paste in a bit of code, and then you're going to replace two things in that code with your own values.

Here's what it'll look like when you're finished.

Copy the code below and paste it into the editor:

@font-face {
    font-family: 'YOURFONTNAME';
       src: url('//YOURFONTURL');
    font-weight: normal;
    font-style: normal;

Replace YOURFONTNAME with the name of your font - mine is 'Wallows'. This doesn't have to be the real name of the font, and for ease of use, I suggest condensing it to a single word that's easy to remember and spell.

Replace YOURFONTURL with the one you copied earlier. Here's the important part! Delete the "http:" from your URL, so it starts with the two forward slashes //.

Save that puppy.


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.

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!