How to embed fonts in Adobe Captivate

How to embed fonts in Adobe Captivate

Posted on Nov 10, 2016

How to embed fonts in Adobe Captivate



Adobe Captivate is no doubt a powerful e-learning creation tool, but every now and then there are a few features that appear to be lacking.

Soon after adopting Adobe Captivate as our main content-creation tool we became frustrated by the fact that we were limited to just a handful of web fonts. Verdana is great and everything, but it just doesn’t hack it when you need an impactful title. We wanted to experiment with some custom fonts; we wanted to experiment with the likes of the always-classy Montserrat, the playful Varela Round, the probably-only-good-handwritten-typeface Pacifico and the serious slab-serif Kreon.

But you can’t just go in all guns blazing and expect these typefaces to be delivered flawlessly on every device. As soon as you publish that course and access it from somewhere without the font installed, you’ll be faced with a rather jarring, dated default Times New Roman.

Fortunately, after some research and a lot of trial and error, we figured out how we can use these fonts to their full potential and on every device imaginable.

Not ones to keep this sort of thing secret, and because we want to help out designers of beautiful e-learning internationally, we wanted to share our method.


Embedding fonts

This method is for Adobe Captivate 9 but the principles can be applied to earlier versions.


Step 1.Finding the correct system folder

Go to the Adobe Captivate system folders. To do this, navigate to C: >>> Program Files >>> Adobe >>> Adobe Captivate 9 >>> HTML >> Assets >>> css.


Step 2. Create your fonts folder

Create a new folder and name it ‘fonts’.

This is where you are going to put all your custom fonts.

You need the font in 5 different formats in order for it to work correctly on every device: eot, woff, woff2, ttf (truetype) and svg.

Usually if you download a font, you’ll get it in either otf or ttf format. There are a number of sites that offer font conversion, or will sell the other formats.

(Try who offer free fonts for commercial use in a number of formats).

Once you have your fonts, drop them into this folder.


Step 3. Create your fonts.css file

Using Adobe Dreamweaver or another web editor (or failing that, notepad), create a new CSS file, and paste the following code, replacing “FontName” with your own font names.

@font-face {

font-family: 'FontName';

font-style: normal;

src: url('../fonts/font-name.eot');

src: url('../fonts/font-name.eot?#iefix') format('embedded-opentype'),



url('../fonts/font-name.woff2') format('woff2'),

url('../fonts/font-name.woff') format('woff'),

url('../fonts/font-name.ttf') format('truetype'),

url('../fonts/font-name.svg') format('svg');


Then save this file as ‘fonts.css’ and place it in your new fonts folder.


Step 4. Create a custom css file to load your fonts.css file

When Captivate publishes a project, it creates a file called ‘CPLibraryAll.css’.

You’ll need to create a version of this and place it in the css folder.

This file is not in the folder by default as it is created on publish. So, what you will need to do is publish a test project, open up the SCORM package, and retrieve the file from assets >>> css.

Copy the file and paste it into css folder at C: >>> Program Files >>> Adobe >>> Adobe Captivate 9 >>> HTML >> Assets >>> css.

Open the file in Dreamweaver, and add to the beginning:

@import url("../css/fonts/fonts.css");

Save the file.


Step 5. Publish and test!

Now, when you publish an HTML5-only course from Captivate, the font will be embedded!

Make sure you test this though, just to be certain.


Step 6. Go to town with your custom fonts

Mixing up your use of font can keep your e-learning from getting monotonous and give your work character.

Interested to see what we’ve done with custom typefaces? Then why not sign up to flick today?



2 weeks, 1 day ago

Want to know how a HACCP system is built and managed? Take a look at our new #HACCP course, available now in the fl…

2 weeks, 3 days ago

Are you looking to gain a better understanding of the HACCP process? Our new #HACCP course is designed to do just t…

3 weeks, 1 day ago

Do you know what #HACCP stands for? Have a look at our new course to find out! Available now in all flick subscript…

Flick Learning Ltd

Fargo Studios, 54 Grafton Street, Coventry, West Midlands, CV1 2HW. Copyright 2020 All Rights Reserved. Company No. 09270577