Using fonts that are not web-safe on your eLearning module
All eLearning modules have several different factors that make them successful and appealing to the eye of the learners. From instructional design, to graphic design and programming, there are a lot of different little things that contribute to a very “sexy” eLearning module.
One of the things, in graphic design, that can make an eLearning module less static and more dynamic, or easy on the eyes, is the font.
You may encounter in your work as an eLearning developer, that you might need different fonts to convey different messages or highlight information for the learner to remember more easily than other things. It is usually very easy to select the text box (if you are using an authoring tool like Storyline or Captivate) and in the properties, change the font to something more appealing. Even if you are coding from scratch in HTML and CSS, you can use different fonts to make your eLearning course look much better.
However, there is an issue that you may only notice once you publish the course and test it on other computers, and this issue, is that you might see the eLearning is rendered with a different font than the one used in programming, probably making you enter in a state of panic and troubleshooting.
Why does this happen and how to fix it?
Let’s start by saying that it doesn’t happen all the time, and if you are a skilled HTML programmer you may never experience this issue (or probably you have experienced it in the past, but now you know how to solve it).
I have found that it happens mostly when using authoring tools, especially when using Adobe Captivate and creating responsive eLearning modules.
The reason for this to happen, is that fonts that you used in the development of your eLearning, might not be web-safe fonts. Web safe fonts, as defined in cssfontstack.com, are “fonts that are pre-installed by many operating systems.”, so the end-user wouldn’t have any issues when going through the eLearning.
In the past, when using Flash to develop interactivities, it was easy to embed any fonts you wanted (just by selecting one option before publishing), so the user wouldn’t need install anything on their computers, however, nowadays the process is different, and maybe more complicated or less complicated, depending on the tool you are using.
In the case of authoring tools, Storyline and Captivate differ in the way they handle the fonts, with Storyline taking care of everything when you publish your eLearning course, meaning that you don’t need to do anything after the fact, and the learners will have a smooth experience all the same.
However, with Captivate it’s a different story altogether, because when publishing your eLearning module, Captivate will tend not to embed any fonts that you used (unless you have a service like Typekit, in which case the fonts will be automatically embedded) and you will have to manually modify the output’s CSS so that your learners don’t have issues during run-time.
In case you are running into issues with your Captivate output, here is nice step-by-step tutorial to help you with embedding files: https://www.flicklearning.com/blog/how-to-embed-fonts-in-adobe-captivate
