Adding Custom Font to Theme – Adapt Learning Tool

custom font to theme adapt learning

Adapt is a free and easy to use e-learning authoring tool. With this tool we can create eLearning courses which are fully responsive, multi-device, HTML5 compatible. Adapt tool gives the freedom to eLearning developers to customize the courses using the award-winning Adapt developer framework. In this blog we are going to demonstrate the steps to add custom fonts to the theme.

Step 1: Click on the three lines from top left corner.

adding custom font to theme - adapt learning tool - 01

Step 2: Click on the Plugin Management and then select Themes.

adding custom font to theme - adapt learning tool - 02

Step 3: Here you will see the list of themes that you have used for your project. Click on the “Visit plugin homepage”.

adding custom font to theme - adapt learning tool - 03

Step 4: It will open the link where the theme files will be available. Download the theme by following these steps.

adding custom font to theme - adapt learning tool - 04

Step 5: Unzip the downloaded file and go to fonts folder.

adding custom font to theme - adapt learning tool - 05

Step 6: Now add required fonts in this folder. You can add multiple fonts.

adding custom font to theme - adapt learning tool - 06

Step 7: Now zip the folder.

adding custom font to theme - adapt learning tool - 07

Step 8: Upload the zip file to the Theme Management in adapt learning tool.

adding custom font to theme - adapt learning tool - 08

adding custom font to theme - adapt learning tool - 08.1

Step 9: Now add a class to the text component where you want to change font.

adding custom font to theme - adapt learning tool - 09

adding custom font to theme - adapt learning tool - 09.1

Step 10: Save and go to the project setting. Select Custom CSS tab and add the following CSS.

adding custom font to theme - adapt learning tool - 10

After adding the font to the fonts folder, now in CSS add the url (fonts/) then the font name.

“.Fontchange{
font-family: AnuDaw;
src: url(fonts/ANUDRG.ttf);
}”

Step 11: Save and preview to see the output.

adding custom font to theme - adapt learning tool - 11

Tags: Flash to HTML5 Conversion Services, Learning Management System, Translation and Localization, Convert PowerPoint to eLearning, Custom eLearning Development, Rapid eLearning Development

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *