Last week I was working on an e-Learning course which needs to be delivered in HTML5 – a course to be compatible with Mobile devices. The software used for this project was Captivate. Everything in the course was working fine until client want to use a specific font that was not a free or default font available on the user machine.
If you ever wanted to embed a custom font in the course, then this is the post/tutorial for you.
Let’s say you develop a course in Captivate using custom font and published it in HTML5; CSS helps you to embed the custom font into the course publish package.
I would like to share the method to embed font in an elearning course.
Steps to Embed Font Using CSS:
Step 1: Access to the folder assets>css
Step 2: Create a new folder as Fonts
Step 3: Paste the desired Font into the Fonts folder
Step 4: Open CPLibraryAll.css file from assets>css folder
Step 5: Embed the desired font or font family using the below code example:
src: url(‘fonts/texgyreheros-regular-webfont.eot?#iefix’) format(‘embedded-opentype’),
Step 6: Find ‘.cp-actualText’ class in the same CPLibraryAll.css file and add below code
Step 7: Run the course to view the result