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.





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