You can customise the fonts used across your platform to better align with your branding. Fonts can be set for both headings and body text.

There are two main ways to apply fonts:

Google fonts (recommended)
Custom file fonts

Use Google Fonts (Recommended)

This is the easiest way to add fonts to your platform.

Step-by-step:

Go to Google Fonts
Search and select the font you want to use
Choose the styles (e.g. Regular, Bold)
Select @import and copy the link provided
Go to your platform
1. Control > Settings > Themes > Fonts box
Paste the link under Heading font URL
Copy the font name into Heading font-family name
Repeat the steps for your body font

💡 Tip:

If you need help choosing, check out this list of popular Google Font alternatives

Use Custom Font Files (Advanced)

If you're using a brand-specific font, you'll need to upload the files manually.

Before you start, you’ll need:

Font files in .ttf, .otf, .woff, or .woff2 format
A text editor like Notepad or any code editor

Step 1: Upload your fonts to assets

Navigate to Control > Content > Assets
Upload your custom font file(s)
- Supported formats: .ttf, .otf, .woff, or .woff2

✏️ Note:

One file = 1 font style

Step 2: Get the URL of your fonts

Click on the files you have just uploaded in Asset:
- Example:
Under the title "File", right click on the blue underlined file
Copy link address

✏️ Note: Copy all font URLs

For the fonts to work correctly, you’ll need to copy the full link address for each uploaded font file. These URLs will be used when building your CSS file in Step 3.

Step 3: Create your CSS file

In a text editor, paste the template below and replace the font name and URL (step 2):

 @font-face {font-family: platform-name;
src: url(URL TO YOUR FONT);
}

Example:

@font-face {font-family: abc-academy;
src: url(https://explained-academy.platform.co.nl/media/a877fb7c/asset_library/document/5dc7c74b-raw-BitcountGridSingle_Roman-Regular.ttf);
}
@font-face {font-family: abc-academy;
src: url(https://explained-academy.platform.co.nl/media/a877fb7c/asset_library/document/1b2445e6-raw-BitcountGridSingle_Roman-ExtraLight.ttf);
}
...

Save the file as a .css file
- Name it something like: your-platform-name.css
- 🔥 Important: Save in CSS format, not .txt
- 💡 Tip: Use this handy converter if needed

✏️ Note: Add more fonts if needed

In this example, only two fonts are included. You can add more by repeating the @font-face block in your CSS file.

Use the same font-family name for each font style
Only the URL should change for each additional font file

💡 Tip: Each font file typically represents a different weight or style (e.g., Regular, Bold, Italic).

Step 4: Upload your CSS file

Navigate again to
- Control → Content → Assets
Upload the .css file you just created
Preview the file to ensure there are no extra characters in the file
- Example:
Right-click on the blue underlined file name
Click Copy link address
1. This is the URL you’ll use in the final setup step.

Example CSS file URL:
https://explained-academy.platform.co.nl/media/a877fb7c/asset_library/document/fb8ed5c7-raw-explained-academy.css

Step 5: Apply the font in theme settings

Go to Control > Settings > Themes
In the Fonts section, update the fields:
1. Heading font-family name and Body font-family name
  1. Use the exact same name from your CSS font-family
  2. Example: explained-academy
2. Heading font URL and Body font URL
  - Use the CSS file URL you copied in Step 4
Click Save preview (font box)
Click Save changes

You’re done!

Your custom fonts are now active on your platform.

Tip: You can preview the font on your platform right after saving to verify everything looks correct
Important: Make sure the URLs are correct and that font names match exactly, this affects how they display.

How to set fonts on your platform