Before we begin, adding a Google Font to your course does require understanding how to add some CSS and CSS classes. If you are not comfortable working with simple CSS, we HIGHLY recommend just using one of our existing 33 Google Fonts.

Coming soon: We'll have an additional help doc for custom fonts if you want to use a non-Google Font.

🎥 Here's a walk-through video of the steps outlined below:

🔍 Step #1: Find your Google Font

You may already have a font selected, but if not, just head to the Google Font library and poke around.

Hot-tip: If you like to find newer, lesser-known fonts, change the sorting option from "Trending" to "Newest." This will give a list of fonts that aren't being used everywhere by everyone!

🤘 Step #2: Select the Font and grab the Link Code

NOTE: 🚨 For this example, we're going to show you adding the Google Font Oi to your course. We would NOT recommend such a bold, hard-to-read font. We used this font as an example because it's very easy to see it change!

You're going to select the font and then grab the link code which we'll add to your course in Step #3.

When you're on the font's page, click the "Select this Style" button in line with the font (if there are multiple font weights, you'll want to choose the one font-weight you want.)
Then, click the "Selected Families" icon which is in the top right (the icon has 3 squares and a + sign).
Scroll down to the Use on the web section, make sure <link> is toggled, and then copy the lines of code.
NOTE: The "CSS rules to specify families" will be needed too, but we'll do that in Step #4.

Oi Font Example code:

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

🍎 Step #3: Add Google Font Code to Your Teachery Course

The code you just copied from Google Fonts we're now going to add to the HEAD TAG code area of your course. Here's how to do that:

Click in to edit your course from the Courses page
In the left sidebar, scroll down to Course Settings, click to expand, and then click Manage Options
In the Manage Options page, scroll down to the "Head Tag Code Injection" section and paste the Google Font code!
Make sure to hit Save ✅ .

NOTE: This step is telling Teachery that there's a Google Font you want to use. Now, we have to assign specific parts of your course to display the font (that's Step #4!)

👾 Step #4 Add simple CSS to display the Google Font in your Course

Writing any custom CSS can be really tricky, so we've tried to give you some sample CSS below that you can interchange easily!

You're going to add a <style>CSS</style> tag into the same Head Tag Code Injection area where you added the Google Font code. It will go directly underneath it (example upcoming).

👉 For the headings of EITHER Teachery Course Template

If you're using the Sidebar or Default Course Template, this code will apply your Google Font to the main heading text on the Overview page and Lesson pages:

<style>
.imitate-h3, h3, .imitate-h2-template-2 {font-family: 'Oi', cursive !important;}
</style>

Remember that "CSS rules to specify families" from way back in Step #2? This is what you'll grab and swap out for the Google Font YOU ARE selecting.

In the code snippet above, you'll simply replace "font-family: 'Oi', cursive" with the CSS rules for your selected font. Leave the !important part as that is needed to override Teachery's fonts.

The completed Google Font code you should have added to your Head Tag Code Injection area will look like this (don't forget to hit the Save button to save ✅ ):

Once you've saved your added CSS, you can preview your course and you should see your Google Font in action! 👍👍👍

IMPORTANT: ⚠️ You will NOT see the Google Font in the course editor view. You'll ONLY see the font display when you preview your course.

❇️ BONUS: How to apply Google Fonts to other text areas in your course

For any OTHER areas of your course where you want to apply your Google Font, you'll need to use the browser Inspector and grab the CSS class(es) and add it to the CSS code.

Here's a video walking you through that process. In the example in the video, we walk you through adding a second Google Font for your Overview page buttons:

If you want the quick CSS to grab to update your Overview page buttons on the Default Course Template, here is that CSS (remember to change your font-family!)

#lessons-page .lesson .button  {font-family: 'Train One', cursive !important;}

***

Hope this helps you customize your course to your liking! 👋