How to Use Custom Fonts for H5P in WordPress

Are you looking to use a custom font for your H5P content in WordPress? The H5P website provides a short tutorial for making visual changes with CSS, but it leaves a lot to be desired. It also doesn’t provide any specific examples for using custom fonts.

This article will explain exactly how to bring custom fonts to H5P, and walk you through each step, providing code samples along the way.

NOTE
This only works for H5P on WordPress.

🎨 Want 90+ design options to customize colors, styles & more in H5P? We’ve built a plugin for that. Check out Design Upgrade Pro for H5P →

---

Adding a custom font to H5P in WordPress is a 4-step process:

1. Retrieve code from Google Fonts (or use another font you own)
2. Create a CSS file
3. Upload the file to your site
4. Add a code snippet to reference the file

We’ll also cover:

• Caveats
• Using multiple fonts
• Targeting specific H5P elements

NOTE
The rest of this article will use the Roboto font from Google Fonts as the example. Keep in mind, you can use any of the 1,000+ fonts available on Google Fonts, or another font you purchased elsewhere, and have the rights to use.

Let’s look at each step in more detail.

1. Retrieve Code from Google Fonts

First, you need to decide which font you’d like to use. It’s also important to think about which styles/weights you will use. You should only select the styles you are going to use, otherwise you’re adding extra weight to your site that will negatively impact performance.

1. Search for the font you want to use
2. Click on the font
3. Find the styles/weights you need
4. Click + Select this style next to each style

In this example, I’m using:

• Regular 400
• 400 Italic
• Bold 700

Once you’ve selected your styles, you need to copy the code that Google provides.

1. Look in the right sidebar
2. Under the Use on the web section, select @import
3. Copy everything in-between the <style> and </style> tags. Do not include the <style> tags. It should look like this:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');

Also take note of the “CSS rules to specify families” code (highlighted in blue). You’ll need that in the next step.

Not Using Google Fonts?

You can use this same technique with a custom font of your own. Maybe you purchased a premium font and want to use that instead of a Google Font. No problem.

When you create your CSS file in the next step, you’ll delete the @import line and replace it with an @font-face declaration. Here’s a great @font-face guide from CSS Tricks.

You will need to upload your font file(s) to your server, and then reference them in the @font-face declaration. I recommend you use the full URL to the font file on your server.

The rest of your CSS file will be the same as below. Just replace “Roboto” with the name of your custom font.

2. Create a CSS File

Now we’re going to create a CSS file, where we’ll place the code we copied in the previous step.

You can use any text editor for this step, or a code editor, if you prefer. (Notepad, TextEdit, Sublime Text, etc.)

1. Create a blank file. Name it h5p-custom-font.css. Make sure it uses the .css filename.
2. Paste your @import statement at the top, on the first line.
3. Add a line break. Then paste the following starting on line 3, replacing the font-family line with the “CSS rules to specify families” code from Google Fonts:

html.h5p-iframe,
html.h5p-iframe > body,
.h5p-frame {
	font-family: 'Roboto', sans-serif;
}

Your final h5p-custom-font.css file should look like this:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');

html.h5p-iframe,
html.h5p-iframe > body,
.h5p-frame {
	font-family: 'Roboto', sans-serif;
}

3. Upload CSS File to Your Site

Now we need to upload this .css file to your site.

There are three main ways to do this. All of them are a little technical, but still doable for beginners. I’ll walk you through it.

3a. Use an FTP Program

FileZilla is a free FTP program available for Windows & Mac. There are plenty of others, but this is my recommendation.

1. Connect to your site via SFTP
2. Navigate to the /wp-content/uploads/h5p/ folder and upload your h5p-custom-font.css file there

Explaining all the steps for how to use FileZilla is beyond the scope of this article, but there are tons of tutorials on the web & YouTube videos explaining the process.

3b. Using cPanel’s File Editor or Hosting Control Panel

Hopefully you’re using a managed WordPress host that isn’t using cPanel, but many budget-friendly hosts still use cPanel, so I realize this is a reality for some of you. cPanel has a feature called the File Manager. It allows you to access files on your server, including uploading new ones.

1. Login to your hosting control panel or cPanel. Search for “File Manager.”
2. Navigate to the same path as above: /wp-content/uploads/h5p/
3. Upload h5p-custom-font.css in this folder

Alternatively, if your host provides a way for you to upload files via their control panel, feel free to use that. If your host offers it, this will be the easiest & quickest solution.

3c. Using the Media Library

WARNING
This is not recommended and should only be used as a last resort.

If you’d prefer to upload the file to your WordPress Media Library, you can do that, but it’s a bit more tricky. By default, WordPress does not allow you to upload CSS files to the Media Library for security reasons.

First, you’ll have to allow unfiltered file types to be uploaded (see this guide).

To do this, you’ll need to edit your wp-config.php file. Be very careful with this file as one small error could bring your entire site down.

Add the following line just before the /* That’s all, stop editing! Happy blogging. */ line.

define('ALLOW_UNFILTERED_UPLOADS', true);

You can either edit this file directly, as outlined in 3b above. Or upload it via FTP, as outlined in 3a above.

Once this is done, you can then upload your CSS file to the Media Library, just like you would an image.

After your file is uploaded, you should remove that line from your wp-config.php file to ensure best security practices.

4. Code Snippet to Include CSS File

Finally, we need to tell H5P to use this new CSS file we just uploaded, which contains our custom font code.

1. Install & activate the Code Snippets plugin
2. Add a new snippet. The Title is for internal naming only.
3. Paste this into the code field:

You might need to alter this code slightly, depending on the option you chose above (3a, 3b, 3c). More on this below.

/**
 * Add Custom Font CSS File to H5P Iframe
 */
function myh5p_custom_font(&$styles, $libraries, $embed_type) {
  $styles[] = (object) array(
    // Path must be relative to wp-content/uploads/h5p or absolute.
    'path' => '/h5p-custom-font.css',
    'version' => '?ver=0.1'
  );
}
add_action('h5p_alter_library_styles', 'myh5p_custom_font', 10, 3);

This code assumes 2 things:

• You named your file h5p-custom-font.css. If you named it something else, change the file name to match yours.
• You uploaded your file to the /wp-content/uploads/h5p/ folder. If you uploaded it to the Media Library, you’ll need to copy the URL and replace /h5p-custom-font.css with the full URL to your file.

If you uploaded the file to your Media Library, the 'path' => line will look something like this:

'path' => 'https://yoursite.com/wp-content/uploads/2021/05/h5p-custom-font.css',

The full URL should be placed between the ' and ' marks.

4. Select the Only run on site front-end option
5. Click Save Changes & Activate

🥳 Congratulations! Your custom font should now be in use for your H5P content.

Caveats

This code works best when combined with our Design Upgrade Pro for H5P plugin because we reset all H5P fonts to inherit the font you use with this method.

H5P does set unique fonts on some parts of specific content types, so it’s possible that not all text will use your custom font. You can fix this by locating the selector that is applying a unique font, and adding it to your CSS file.

For example, the .h5p-course-presentation class uses the H5PDroidSans font. In order to override this and use your custom font, you would need to add this selector to the list in your CSS file, like this:

html.h5p-iframe,
html.h5p-iframe > body,
.h5p-frame,
.h5p-course-presentation {
	font-family: 'Roboto', sans-serif;
}

There are other instances where H5P has chosen to use a specific font. Here’s a video that explains how to locate the selectors that you need to add to your code.

Multiple Custom Fonts

It is also possible to use multiple fonts, however, we recommend you keep this to a minimum. The more fonts you use, the more of a performance hit you’ll take.

In the CSS file we created in step 2…

• Add multiple @import lines, one with each font you want to use.
• Choose one to be your default font. Use that in the code we referenced at the top of your file. Then you can follow the instructions below to apply different fonts to different content types or elements.

Different Fonts for Specific Content Types or Elements

The CSS file we created above will change the font for every single content type you use. All text will use your custom font, including numbers, tooltips, video timelines, pagination, etc. This might not be ideal, but you can customize it.

To apply different fonts to different content types, you need to add more CSS to the file we created in step 2. All new CSS goes below the CSS we already have.

/* Global font, used for most H5P content */
html.h5p-iframe,
html.h5p-iframe > body,
.h5p-frame {
	font-family: 'Roboto', sans-serif;
}

/* Course Presentations (default: H5PDroidSans) */
.h5p-course-presentation {
	font-family: 'ANOTHER FONT', sans-serif;
}

/* Arithmetic Questions (default: Lato) */
.h5p-baq {
	font-family: 'ANOTHER FONT', sans-serif;
}

/* Flashcards (default: Open Sans) */
.h5p-flashcards {
	font-family: 'ANOTHER FONT', sans-serif;
}

/* Audio Recorder (default: Arial) */
.h5p-audio-recorder-view {
	font-family: 'ANOTHER FONT', sans-serif;
}

/* Audio Recorder Timer / 00:00 (default: Open Sans) */
.audio-recorder-timer {
	font-family: 'ANOTHER FONT', sans-serif;
}

/* Audio Recorder Record Button (default: Open Sans) */
.h5p-audio-recorder-view .button {
	font-family: 'ANOTHER FONT', sans-serif;
}

This is not an exhaustive list. There are likely other fonts that H5P is using that might prevent your custom font from appearing in some places.

If you want to look into the code, you can browse the h5pd.php file in the /assets/css/ folder in the Design Upgrade Pro for H5P plugin (for purchase) to get an idea of what selectors to use for different elements.

---

I hope this guide helps you implement a custom font for your H5P content in WordPress. If you have any trouble getting it to work, or any questions, please let me know in the comments. I’ll do my best to help you out.