Add a Custom Font to Your Course

Adding a custom font in Teachery only requires a few simple steps.

Note: Currently, it’s not yet possible to add a custom font to payment pages built with our new payment page builder. 🚧 Please use our original payment page template in the interim.

OPTION 1⃣: If you're utilizing free Google fonts…

We have a dedicated area to add any Google font to your Teachery course.

We recommend using our Global Font Palette feature if you want to use Google Fonts, but you can also use the alternative method below.

Step #1: Grab the Google font embed code

While viewing your selected Google font (or multiple selected fonts):

• Click the Get embed code button

• Then make sure you're on the Web view

• And finally click Copy code

Step #2: Add the copied Google font files to Teachery

Click into your course in Teachery and in the left sidebar scroll down to Course Settings > Manage Options. Scroll down to the Add Custom Font Code and paste your <link> code from Google.

What you paste should look like this:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oi&display=swap" 
rel="stylesheet">

Step #3: Add a snippet of CSS to display the font

Once you've saved the Manage Options page, click into the Style Your Course > Add Custom CSS area of the sidebar.

To apply your Google font to the body copy, here's the CSS (replace "MyAwesomeWebFont"):

*, body {
  font-family: "MyAwesomeWebFont", sans-serif;
  font-weight:400;
  font-style: normal;
  letter-spacing: -.3px;
}

To apply your Google font to all of the Headings (H1, H2, H3, H4), here is the snippet of CSS to use (replace "MyAwesomeWebFont"):

.imitate-h3, h3, h1, h2, h3, h4, h2froala, 
.imitate-h2-template-2 {
  font-family: "MyAwesomeWebFont" !important; 
}

Make sure to click the button that says Apply Changes AND Publish Changes once you add any custom CSS.

And that'll do it! You've successfully added any Google font to your course.

OPTION 2⃣: If you're utilizing Custom fonts…

Let's say you've discovered an amazing font and purchased a license for it. You should've received a ZIP file that included a few different font formats you can use.

There is much debate online about using OTF, TTF, WOFF or WOFF2 as the correct webfont file. Our recommendation is to use the WOFF or WOFF2 file. You can use the others, but WOFF and WOFF2 seem to be a better standard across all devices.

Step #1: Upload your custom font to any editable text area in a course

This is a simple little trick to let Teachery manage the custom font file, so you don't have to upload it to your own website.

If you’re not yet familiar with how to manage files using our built-in file manager, please start here.

In any lesson or payment page of a course in your Teachery account:

• Click into an editable text area

• Type any word or phrase (example: custom font file)

• Highlight the word or phrase you inserted, click the ( + ) button in the widget that pops up and then click the upload file icon to open the file manager

• Import your font file and, once uploaded, select the file and click the copy URL icon (or the copy URL icon found in the file’s info panel on the right) - you will need this URL for the next step

• You can now close the file manager and delete that original word or phrase you’d inserted in your text area (it’s no longer needed)

Step #2: Add a snippet of CSS to display the font

Now, head to the Style Your Course > Add Custom CSS area of your course and paste the following code at the top of your Custom CSS area:

@font-face {
  font-family: 'MyAwesomeWebFont';
  src: url('https://example.com/webfont.woff') format('woff'),
  url('https://example.com/webfont.ttf') format('truetype');
}

• Replace 'MyAwesomeWebFont' with the name of your font

• Replace the src urls with the links you copied from uploading your custom font to your course content block

• Click the button that says Apply Changes AND Publish Changes to save your CSS

Make sure your format (ex: 'woff') matches the format of your font file you uploaded.

Step #3: Apply your new font family to your course using custom CSS

While still in the Add Custom CSS area...

To apply your Google font to the body copy, here's the CSS (replace "MyAwesomeWebFont"):

*, body {
  font-family: "MyAwesomeWebFont", sans-serif;
  font-weight:400;
  font-style: normal;
  letter-spacing: -.3px;
}

To apply your Google font to all of the Headings (H1, H2, H3, H4), here is the snippet of CSS to use (replace "MyAwesomeWebFont"):

.imitate-h3, h3, h1, h2, h3, h4, h2froala, 
.imitate-h2-template-2 {
  font-family: "MyAwesomeWebFont" !important; 
}

There you have it! If you have any questions or run into any trouble adding custom fonts to your course, feel free to reach out to us via the support chat 💬 icon.