Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.
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:
- Retrieve code from Google Fonts (or use another font you own)
- Create a CSS file
- Upload the file to your site
- Add a code snippet to reference the file
We’ll also cover:
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.
- Search for the font you want to use
- Click on the font
- Find the styles/weights you need
- Click + Select this style next to each style
In this example, I’m using:
Rapyd just launched the fastest BuddyBoss, LearnDash & WordPress LMS hosting on the planet. Get 25% OFF with their early bird discount and lock-in up to 2 years of discounted pricing. From the creators of BuddyBoss.
Get 25% OFF Rapyd Today →
- Regular 400
- 400 Italic
- Bold 700
Once you’ve selected your styles, you need to copy the code that Google provides.
- Look in the right sidebar
- Under the Use on the web section, select @import
- 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.)
- Create a blank file. Name it
h5p-custom-font.css
. Make sure it uses the.css
filename. - Paste your
@import
statement at the top, on the first line. - 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.
- Connect to your site via SFTP
- Navigate to the
/wp-content/uploads/h5p/
folder and upload yourh5p-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.
- Login to your hosting control panel or cPanel. Search for “File Manager.”
- Navigate to the same path as above:
/wp-content/uploads/h5p/
- 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.
- Install & activate the Code Snippets plugin
- Add a new snippet. The Title is for internal naming only.
- 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.
- Select the Only run on site front-end option
- 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.
Automate your LMS site with over 150+ plugins & apps. Uncanny Automator is the perfect no-code automation tool to replace dozens of WordPress plugins.
• Supports LearnDash, Tutor LMS, LifterLMS, and most membership plugins
• Trusted by 30,000 companies
Get 10% OFF with code affiliate10-dwarfel
Paul Treffler
Well Dave, as expected, my first bit of CSS was too good to be true!
Having followed everything to the letter, I’m not seeing the font changes on the front end. I double checked the file name, uploaded to public_html/wp-content/uploads/h5p on cPanel, added the snippet without a title, selected to only run on front end, deleted the cache everywhere – everything appeared to be fine during all this. Clearly I’ve gone wrong somewhere!
Am I overlooking something? Should I not have deleted the minified CSS in WP Fastest Cache? Will uploading via FileZilla bring me more luck? Probably impossible for you to diagnose the problem your end. I guess I’ll delete the file and try again!
Cheers!
Dave Warfel
Hey Paul – It could have something to do with the settings/caching of WP Fastest Cache, or possibly just a typo somewhere.
If you email me the following, I’ll take a look for you:
Wekas
Here the same. It does not work at all. Tried out with an expert, who was too tired to look any further to find the bug. Maybe you’d create a video.
Dave Warfel
Hi Wekas – Paul’s issue was that when he created his CSS file, it saved as a text file instead, so the browser didn’t recognize it as a CSS file, and thus could not process the font styles.
If you are working with a real expert, that shouldn’t be your issue. An expert would notice that right away.
A video is just going to tell you the same things that this article lays out.
I can confirm that this works on several different sites across a few different hosting platforms. It really should work on all setups.
You might be referencing the wrong file location. You might have some caching in place. Try clearing all your cache or temporarily disabling your performance plugin.
Aside from that, it’s impossible for me to know what your issue is without having access to your site. I can take a look at your setup for a small fee if you’d like. Email me: dave@escapecreative.com.
Priscille
Thank you so much! exactly what I was looking for!
Dave Warfel
🙌
Joel
You made my day!
Dave Warfel
🙌 😀
Rasheed
Thanks for this excellent tutorial Dave. It’s working great for me. Using H5P with Sensei LMS and Divi theme currently.
Dave Warfel
So glad to hear it worked well for you, Rasheed. Thank you for the kind words 🙂🙏, and for sharing your setup with the community.
Iana Galai
Hey Dave, could you please help me with this? I have followed all the steps, but I still have problems with Drag the Words activity. The default font remains. I had the same problem as Paul here with notepad not being saved as CSS, but I fixed it. I also have the H5P Customizer activated. Nevertheless, the problem persists…
Dave Warfel
Hi Iana,
I would need the following to be able to help. Please send me an email with this info:
1. SFTP access to your site
2. Where your H5P CSS file is located
3. A link to the page/lesson where a Drag the Words question is being used