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.CCS

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{

Step 7: Run the course to view the result


HTML5 is an Effective Authoring Tool

HTML5 Has Boosted E-Learning Industry

The advent of HTML5 which is one of the most recent E-Learning authoring tools is indeed a boost to the eLearning industry and has created an overall easiness to the process of designing eLearning courses. The most enticing feature of HTML5 is that you don’t have to be an expert to create mobile-friendly and interactive eLearning content! But you can design effective eLearning courses like an expert! HTML5 is similar to ‘Flash’ in structure, because it is a single file item. However, it is different in application; there is no plug-in for the end-users, nor there is any specific need for local elearning tools. It will not be hyperbole to say that HTML5 has opened new doors for the creation of extremely expressive eLearning courses, and this is good as far as eLearning industry is concerned.

Plus Points of HTML5

  • The first and foremost advantage is that HTML5 is a free and open technological too and this gives you the freedom to use it in accordance with your own specific requirement.
  • You can make your web pages more representative and powerful. Attributes such as the ‘easiness of creation’, the ‘sharing’ feature, and the ‘reusable’ characteristic will empower you to build powerful elearning courses.
  • HTML5 will facilitate the process of mobile-friendly content creation, and this is simply great, because, in our time, mobile devices like smartphones, tabs, etc. have become par for the course.
  • HTML5 allows you to set up informative presentations and videos, and to edit them accordingly. This is applicable to both CMS and LMS platforms, which makes it all the more convenient.
  • There is no need for local software and end-use plug-ins, and this means client satisfaction.
  • HTML5 users will be able to share valuable data such as codes and contents.
  • The availability of various content types is another benefit of HTML5.
  • Updation process is easy, and this will make all users happy.

HTML5 Has Made Instructional Designing Easy

Though Flash, which was incorporated with numerous authoring tools, was the top mobile development support tool during the initial days, these days the scenario has changed a lot. Overdependence on Flash will not give you an upper hand in today’s competitive online field. A good section of the instructional designers and elearning content providers have started to hunt for different ways, other than Flash. It is here the resourcefulness of HTML5 will fit in.

These days, as elearning schemes are very much popular, governments, as well as private organizations are pumping huge amounts of fiscal resources to create numerous categories of elearning games, apps, and courses. Now, with the arrival of HTML5 the process of creating elearning courses and elearning games has become very easy and at the same time, highly effective also.

Available Content Types

Instructional designers who use different platforms such as Drupal, WordPress, and Joomla will be benefited by HTML5. Moreover, the availability of different content types will make their tasks easy. The available content types include Boardgame, Dialog cards, Drag and drop, Fill in the blanks, Flashcards, Iframe Embedder, Image hotspots, Interactive video, Memory game, Multichoice, Picture Slider, Presentation, Question set, Summary, and Timeline.



Would HTML5 be instrumental for Mobile Learning?

The world is moving with a fast pace resulting into life getting faster. The need to have robust technologies to keep us abreast with the latest utilities has grown tremendously over the past decade. The scope and demand for mobile learning has shown exceptional growth and it has become necessary to have mobile devices compatible with effective learning.

HTML5 offers immense possibilities in the field of Mobile Learning and tools for Instructional Designing. The development of the mobile content would need defined strategies irrespective of the technology used to have clear directions to be followed and implemented in regards to graphics, templates and font size as well. The aspects which are important while planning a mobile module would have the following considerations;

• The goals to be achieved.
• Compatibility of the projects with the mLearning.
• Whether mLearning is acceptable by the Learners.
• Learners readiness for mobile learning.
• How and for what purposes the target group uses the mobile devices.
• And finally what are their expectations in terms of mLearning.

The other very important aspect is to create original content for mobile devices and to avoid publishing the same content of eLearning into the content readable on mobile devices. Because it might not be suitable for mobile devices as going through the extensive and detailed materials wouldn’t be convenient as they are for mLearning. The idea for creating mLearning content should be to create small chunks or bits of knowledge modules to have short and crisp learning to keep the learners interested.

As reported by BBC News , the coming years would create vast mobile space as mobile users have grown manifolds and still growing. When we look at the stats forecasted by the analysts we come to the conclusion that this trend is going to grow further opening the scope for mobile learning in an incredible way.  As it’s predicted, mobile devices will become an integral entity to the individuals.  It’s imperative for the underlying technologies and mobile devices to acquire further sophistication.  HTML5 is going to offer extensive opportunities for mobile learning as it is continuing to improve and ready to outpace the other proprietary tools.

HTML5 is going to add value towards learning and designing content for mobile devices. The approach towards HTML5 for mobile learning needs to be with a new mindset and creative ideas as to go along with the mobility and adaptability towards mobile learning instead of republishing the content targeting the mobile devices. The design and development of the content should be in accordance with the technological functionality of the mobile devices in terms of GPS capabilities. Extensive innovations and enhancements would be needed for creating augmented modules, embedding website links and other relevant codes, emphasizing on creative graphics and so on.

To conclude HTML5 offers many interesting and innovative designing ways for making the mLearning innovative, crisp and user friendly. The future looks bright for HTML5 with immense and far reaching possibilities. Swift Elearning Services Pvt. Ltd. had developed number of efficient and cost effective HTML5 based mLearning courses and ready to support companies to meet HTML5 needs. Visit SWIFT at: www.elearningserv.com