Recently, we had to add some Google Fonts to a LearnDash Certificate and we found a great article on Discover eLearning: how to add custom fonts to your LearnDash LMS certificates But this method has two needed improvements:
- Once you update the LearnDash LMS plugin, your fonts will be gone and you will need to add them manually again.
- You need to use an external tool to convert your .ttf file
So we delved into the source code of LearnDash and found that there is a hook to make it work without losing the changes when the plugin is updated.
1) Upload your .TTF file #
Create a subdirectory named fonts on your theme (or child theme) and upload your .ttf file(s) on it.
On this example, we will download the following fonts:
- Alex Brush: https://fonts.google.com/specimen/Alex+Brush?query=alex+brush
- Open Sans: https://fonts.google.com/specimen/Open+Sans?query=open+sans
When you download a font from Google Fonts, you will get a lot of .ttf files for some fonts. On this case, Alex Brush only contains 1 .ttf file because it has no variations. But Open Sans contains 38 .ttf files (if you didn’t filter the styles before downloading), for this example, we will use only the normal and bold versions. So, the list of files we will upload are:
- AlexBrush-Regular.ttf
- OpenSans-Bold.ttf
- OpenSans-Regular.ttf
2) Add code to functions.php #
Now, you will add the following code to your functions.php:
You may want to edit this code to match the fonts of your preference, but please pay attention to the following details:
- On the file_exists conditional, your font name must be all lowercase, without spaces or dashes and followed by .php
- We will add each of our .ttf files using TCPDF_FONTS::addTTFfont Note that on this case, the filename must match the filename of the .ttf files, including uppercases, dashes, etc. And that it includes the /fonts/ subdirectory we created.
What this code does is to generate the same files that you would have generated with the external tool but using the TCPDF library that is already included in LearnDash. This way you don’t depend on external tools.
It also checks if those files already exist, this way they are not generated every time the site is loaded. But they are only generated the first time and after every plugin update (because they will be removed with the update). So, you don’t need to worry to manually add them every time.
3) Using the fonts on your certificates #
You are ready to start using the fonts on your certificates as you would normally do using inline CSS, for example:
But there are 2 important things to note:
- The font-family needs to have the same format that we previously used in the file_exists conditional, for example: opensans instead of Open Sans.
- You cannot use font-weight: 700 to make a font bold, you only can use the “bold” keyword ( font-weight: bold).
