Choose lesson fonts

Give your lesson its own look by choosing two fonts from Google Fonts : a decorative font for headings and a body font for everything else.

How the two fonts are used

You can set one font, both, or neither. Any font you leave on Default font keeps Teacharium’s standard font:

• Decorative font only: your H1 and H2 headings use it, and everything else stays in the default font.
• Body font only: everything uses the body font, headings included.

Choose your fonts

1. Open your lesson in the editor.
2. Open the Lesson Settings panel and expand Appearance.
3. Under Fonts, open Decorative font (H1, H2) and pick a font. Use the category menu to narrow the list to Google’s categories (Display, Serif, Handwriting, and so on). Categories follow Google’s classification, so a font you know may sit in a different category than you expect. Nunito, for example, is Sans Serif. If your search matches fonts in other categories, the picker tells you and lets you show them.
4. Open Body font and pick a font.

Search by name and each font name shows in its own typeface. Your choice saves right away, and a small preview under the pickers shows both fonts together.

To go back to the standard font, open the picker and choose Default font.

Where your fonts appear

Your fonts are used everywhere Teacharium shows the lesson:

• The editor canvas: you see your fonts while you build each step
• The text editor: headings and body text in the text editing dialog use your fonts
• Step preview inside the editor
• The lesson player when you play the lesson
• Hosted embeds (the Embed SDK) and LTI launches in your LMS

The panels, toolbars and menus around your lesson keep Teacharium’s normal font. Only lesson content changes.

Published versions: learners see a published version of your lesson. After changing fonts, publish a new version so embedded and LMS learners get the update.

Exports and self-hosted players

If you export a lesson or a developer plays it with the self-hosted player, the lesson remembers which fonts you chose, but the font files aren’t included. Whoever hosts the lesson has to load the fonts on their page. Until they do, learners see a similar fallback font. Share the Lesson Fonts developer guide with them.

Tips for choosing fonts

• Keep the body font simple. Learners read a lot of body text. Clear sans-serif fonts such as Open Sans, Lato, Nunito or Atkinson Hyperlegible (designed for readability), or a serif such as Merriweather, work well.
• Have fun with headings. Headings are short, so the decorative font can show more personality: try Lobster, Fredoka, Baloo 2 or Playfair Display.
• Two fonts are plenty. If you want just one font throughout, set only the body font.
• Check your special characters. Some decorative fonts don’t include accented letters, symbols or non-Latin scripts. If a character is missing, the browser shows it in a fallback font.
• Preview on a phone. Thin or very ornate fonts can be hard to read on small screens.

Fine-tuning with Custom CSS

You can make exceptions with Custom CSS (in Lesson Settings). Any font you set there wins over the lesson fonts. The Custom CSS editor’s Reference panel lists the class for each step, such as .step--quiz-time-2.

Use a different heading font on one step by setting the --tp-font-display variable:

.step--quiz-time-2 {
  --tp-font-display: "Bungee", system-ui, sans-serif;
}

Use a different body font on one step:

.step--poem-5 {
  font-family: "Merriweather", Georgia, serif;
}

Restyle one heading level:

h2 {
  font-family: "Open Sans", sans-serif;
}

Custom CSS applies in step preview and the player, but not on the editor canvas.

Custom CSS can only use fonts that are loaded on the page. Your two lesson fonts are always loaded on Teacharium-hosted pages. To use another Google Font, add an @import line at the very top of your Custom CSS, for example @import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");.

Text effects

The Vintage and Techno text effects in a text component’s style settings use their own font. Inside that component they replace both lesson fonts, headings included.

Privacy note

On Teacharium-hosted pages, the fonts download from Google Fonts’ servers, so learners’ browsers connect to Google to fetch them. Lessons that use the default font make no requests to Google Fonts. If your organization doesn’t allow Google Fonts, keep the default font or self-host the lesson and serve the fonts yourself.