Using Custom Fonts in Your Program

You can choose a preferred font for your Heights program in the Account Settings.

Select "Edit Account Settings" and scroll down until you see "Custom Fonts". From the dropdown, you can select the font you prefer for your program.

The custom font you choose here will only change the titles and header fonts throughout your program.

Uploading a Font to your Heights Program

If you can't find the font you like from the custom fonts dropdown (as explained above), you can always upload your favorite font from Google.

To load a font on the web, you need to be able to host that font file in a web format and have a license to display it on the web. Fortunately, Google Fonts makes this simple and provides you with a number of fonts that you can add to your website, or in this case Heights Platform.

Go to https://fonts.google.com/ and choose a font you like from their free open source catalog, and after you select one by clicking the plus button, look at the bottom of your page where it says "1 Family Selected". Click on this bar and a popup will appear that shows you the link for the font and the style you must specify in CSS.


You will need to copy this and insert these two lines in the custom code tab of your account settings.

While in general we cannot provide support for custom code, below is an example snippet that will get you started and will change the h1, h2, h3 fonts on your lessons when you view them:

<!-- Replace Font Link Below With Your Own -->
<link href="https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap" rel="stylesheet">

<style>
.lesson-row h1, .lesson-row h2, .lesson-row h3{

/* Replace below line with CSS style line provided by Google */
  font-family: 'Odibee Sans', cursive !important;

}
</style>

If you want to instead replace most headers around your program (not only headers inside a lesson's content), the below snippet can help you accomplish this:

<!-- Replace Font Link Below With Your Own -->
<link href="https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap" rel="stylesheet">

<style>
.lesson-row h1, .lesson-row h2, .lesson-row h3, .course-item h2, .lesson-header h1, .active-course .active-title, .course-title{

/* Replace below line with CSS style line provided by Google */
  font-family: 'Odibee Sans', cursive !important;

}
</style>

You will want to place the above in the "program scripts" section of your custom code tab in your account settings after you have replaced the two lines in the above code with the lines you copied from the font you chose.

Learn more about how you can use the Custom Code feature in this article.