Blog

Embedding Fonts in Adobe Captivate 2019

laptop displaying 3 different fonts

Embedding Fonts in Adobe Captivate 2019

Embedding New System Fonts

Fonts help set the tone for an e-learning project, but they are rarely a choice made by the e-learning developer or instructional designer.

In my experience, most organizations have fonts stipulated within their branding requirements and compliance with the brand is mandatory. Marketing or Communications departments will often supply the font files to support and encourage continued brand compliance. This is how I typically acquire new system fonts.

OPTION 1: ADOBE TYPEKIT FONTS

Adobe conveniently incorporates access to Adobe TypeKit fonts directly into Adobe Captivate. This means that we can purchase the license for any fonts we may need without leaving the project.

However, in the situation I described above, I have no justification for purchasing additional font licenses (via Adobe Typekit) because the company has already purchased the appropriate licenses for the fonts and using Adobe TypeKit fonts is not a viable option.

OPTION 2: WEB FONTS

After Adobe TypeKit fonts, the second easiest option would be to access the fonts as Web fonts --if they are available via Google Fonts.

If the font is available via Google Fonts, the following blog post (https://elearning.adobe.com/2017/03/using-custom-fonts-in-adobe-captivate/) by Steven Warwick outlines how you can add it to your project using some basic JavaScript.

However, there are limitations to this method.

  1. Some fonts are not available via Google Fonts (usually because they are not free of charge).

  2. This method requires internet access and access specifically to Google since we are using JavaScript to link to the font while the e-learning module is playing. Hence, if the e-learning module is running on a very secure intranet with no access to sites outside of the company's domain, the fonts will not be displayed.

OPTION 3: EMBEDDING SYSTEM FONTS

In practice, I have found the need to exercise a third option: to embed the company's fonts directly into Adobe Captivate.

After some fishing around on the internet, I was able to find a blog post that described how to do this --albeit for Adobe Captivate 9. Much of the information is still relevant, and I have made very few tweaks to the instructions. I have included the URL in the resources section at the end of this article.

To have the instructions directly available in my blog, and also to have an article that specifically refers to the 2019 version of Adobe Captivate, I am detailing what I have learned in this article.

There are three phases to embedding a new system font within an Adobe Captivate project:

  1. Install the font on your computer;

  2. Add the font to Adobe Captivate's main CSS folder;

  3. Update the main CSS file in the published output of the Adobe Captivate project.

Step 1: Install the Font on Your Computer

  1. Download the font to your computer.

  2. Install the font.
    On a Mac, double-click the font files to open them in the Font Book, and then click the Install Font button.
    On Windows 10, right-click on the font file, and select Install from the context menu.

I have found that as soon as the fonts are installed on the system, they become immediately available to select from the Font menu within Adobe Captivate 2019. If this does not happen, simply restart Adobe Captivate.

You will now be able to apply the font to the text within your Adobe Captivate project, and also view the font when you preview the project in the preview window. I have found that, at this stage, previewing the project within a browser yields mixed results.

While my Adobe Captivate projects are under development, I generally test them in both the Chrome and Safari browsers. In my experience Chrome displays any installed system fonts in project previews; Safari does not display the font until it is embedded within the published output.

Step 2: Add the Font to Adobe Captivate's Main CSS Folder

If you are going to use the fonts regularly, you can ensure that Adobe Captivate adds the fonts' files to every published project by adding the fonts' files to Adobe Captivate’s CSS folder. 

  1. Find out where Adobe Captivate is installed on your machine.

  2. The CSS folder is located under
    /Adobe Captivate 2019/HTML/assets/css.
    Navigate to it.

  3. Within the CSS folder, create a new folder, named fonts (you can call this anything you like, but you need to remember its name).

  4. Copy your fonts files to the newly created fonts folder.

  5. Return to the CSS folder. This is where you will create a CSS file that will tell browsers where to find the new fonts and how to process them.

  6. Using a text editor, create a file named fonts.css (you can call this anything you like, but you need to remember its name).

  7. In fonts.css, define each font and specify where the font is located. For this, you will need to know a little CSS and since I am not going to teach it in this article, here is an example of a fonts.css file I created for a recent project.
    fonts.css file displaying fonts definitions in CSS

  1. Your CSS folder should now resemble the image below.
    The CSS folder displaying the CPLibraryAll.css and fonts.css files as well as the fonts folder.

If you look at the image above, there is an additional CSS file (CPLibraryAll.css) that we have not yet modified. This the file that tells the project where to find all its CSS information.  We will eventually add the location of our new font.css file to definitions within this file. But not just yet. Through trial and error, I have found that there is no value in modifying CPLibraryAll.css at this stage, as it seems as though this file is freshly generated for each published project, and any changes are overwritten.  Therefore, I edit CPLibraryAll.css AFTER publishing the project.

Step 3: Add the Font to the Published Output

  1. After publishing your project, unzip it if necessary.

  2. Browse to the assets/css folder.

  3. Open CPLibraryAll.css and add the following code to the very start of the file:
    @import URL("fonts.css");

  4. Save and close CPLibraryAll.css.

  5. Navigate back up to the main folder level and zip the files up again.

That's it! It gets easier with practice!

In case you run into any problems, here are some troubleshooting tips I hope you will find helpful.

Troubleshooting

Live Preview

Live preview on devices will not display the new fonts. To the fonts on mobile devices, upload the course to your Web server or LMS.

The New Fonts Do Not Display in the Browser: 1

If you are like me, then the most likely mistake to avoid will be misspelling the font’s name within the fonts.css file. I have had this problem in the past when embedding fonts in Web pages.  On this occasion, to avoid misspelling the font’s name, I just cut and pasted it directly from the font’s filename and then replaced dashes with spaces wherever necessary.

The New Fonts Do Not Display in the Browser: 2

Refresh the web page in your browser. I like to clear the browser history also to be sure that a cached version of the project is not being displayed.

SCORM Output No Longer Works -- Unable to Locate imsmanifest.xml File!

When the publish folder is unzipped, the imsmanifest.xml file should be at its root level. 

Sometimes, when re-zipping SCORM output, an extra folder level may be inadvertently created. If this is the case, rezip just the CONTENTS of the publish folder (do not include the actual publish folder) to avoid recreating the unneeded sub-folder.

Resources