How to embed fonts in Adobe Captivate

How to embed fonts in Adobe Captivate

Posted on Nov 10, 2016
Comments

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 fontsquirrel.com 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'),

local('FontName'),

local('FontName'),

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?

 

 

Related articles

The lessons e-learning can take from how we use social media The lessons e-learning can take from how we use social media

How to make a responsive YouTube player for Captivate 8 How to make a responsive YouTube player for Captivate 8

The golden four The golden four

Top 10 benefits of e-learning [White-Paper] Top 10 benefits of e-learning [White-Paper]

 

 

 

 

categories

1 minute ago

RT @innocent: How to feel more Christmassy 1. Start every sentence with 'ho ho ho' 2. Enter buildings via the chimney 3. Swap yo… https://t.co/eu6c77q2jj

17 hours, 51 minutes ago

🎁⛄️🎅🎄 TWO WEEKS TODAY!!! 🎄🎅⛄️🎁 #Merryflickmas #Elearning #Training #StaffTraining #OnlineTraining #Online https://t.co/Dt70pX88sS

4 days, 21 hours ago

Well... if flick training is good enough for Father Christmas???? #ReindeersNotIncluded #Elves #Christmas… https://t.co/VJMqBypacf

Flick Learning Ltd

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