Embedding Custom Font in an eLearning Course

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:

@font-face {
font-family: ‘texgyreherosregular’;
     src: url(‘fonts/texgyreheros-regular-webfont.eot’);
     src: url(‘fonts/texgyreheros-regular-webfont.eot?#iefix’)      format(‘embedded-opentype’),
     url(‘fonts/texgyreheros-regular-webfont.woff’) format(‘woff’),
     url(‘fonts/texgyreheros-regular-webfont.ttf’) format(‘truetype’),
     url(‘fonts/texgyreheros-regular-webfont.svg#texgyreherosregular’)      format(‘svg’);
     font-weight: normal;
     font-style: normal;
}

Step 6: Find ‘.cp-actualText’ class in the same CPLibraryAll.css file and add below code

.cp-actualText span{
     font-family:texgyreherosregular;
}

Step 7: Run the course to view the result

The post Embedding Custom Font in an eLearning Course appeared first on .