There are a few good blogs out there that show you how to apply custom fonts to Adobe Captivate projects. I wanted write my own commentary because I found some of the instructions out there either weren’t a complete solution or there were a few details left out that would have saved me a lot of time.
The reason I wanted to use custom fonts with Adobe is because I have been trying to move from publishing in Flash to publishing HTML5 (Flash will be dead in 2020). After I had cranked out a few projects in HTML5, I noticed that my selected font (Avenir) was not carrying over once I viewed the project in a browser. I later learned that there are only a few web-safe fonts available by default when publishing in HTML5.
Even if you develop the project in a different font that you download to your computer, it will not display after publishing in a web browser. One way around this is to purchase access to Adobe Typekit, which integrates with Captivate 2017. However, if you don’t want to shell out the cash or you are using and older version of Captivate, this article is for you. This article’s methods will give you access to a wider variety of fonts than what is available on Typekit. After doing some research, I found a few techniques that would give me access to any font in Captivate 9 (this should work for 2017 too).
Using @font-face to embed the fonts in captivate
Before getting into this method, I should note that Flick Learning has a blog on how to use @Font-Face in Captivate. Their blog article was very helpful, but I wanted to expand in more detail than was listed.
Step 1: Download Fonts and use Them in Your Captivate Project
Here, you will need to go to a website which offers font packages, download them and install on your computer. Helpful sites that I have used in the past include:
When you find a font that you like, you can download the package (usually a zip file), unzip it and install it on your computer. Installing the font is generally as easy as double-clicking the files once they are unzipped (see below). Generally I use ttf files, but depending on the site and font you choose, you could get a few other types of files.
If you have Captivate open, you will need to close it and reopen before it will appear in your list of available fonts. Once, you have done that, you should begin to apply the font in a project of your choosing.
Step 2: Locate the CSS folder in your Adobe Captivate Program folder
This step is fairly straight forward. Using a Mac, you will go to Finder and click on the applications folder, which may be on your Favorites sidebar or in your “Macintosh HD” directory. From here you will click through the following folders:
-> HTML → assets → css
In windows, the file path is:
C: → Program Files → Adobe → Adobe Captivate 9 → HTML → assets → css
Step 3: Create a Folder called Fonts
Right-click and create a new folder called “fonts”. This is the folder where you can copy and paste fonts that you download and use for future projects. When I was exploring this, I had acquired some fonts from fonts.google.com for my project. There, you will receive .ttf files after you unzip the download. Those .ttf files should be dragged into the fonts folder you created.
Depending on the range of devices you are trying to make your project accessible to, you may have to go to other websites which provide every type of file format for the fonts. Aside from .ttf there are fonts with the extension eot, woff, woff2 and svg.
Step 4: Create a file called “Fonts.css”
While you can do this step with a basic program like notepad, I would recommend using a web editing program like Adobe Dreamweaver. Once the file is created, you will paste in code like this:
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
src: local('Roboto Slab Thin'), local('RobotoSlab-Thin'),
url(RobotoSlab-Thin.ttf) format('truetype');
}Note that in the example above, I used Roboto Slab as my chosen font. Therefore, when you create this code, you will have to replace the ‘Roboto Slab’ (also the 3 references next to src) with the font that you are using.
So, there might be a few different use cases for how you will paste code in the fonts.css file. When you are trying to add other file types, you will need to edit the url or you will have to add urls to reference multiple file types. For example:
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
src: local('Roboto Slab Thin'), local('RobotoSlab-Thin'),
url(RobotoSlab-Thin.ttf) format('truetype');
url('RobotoSlab-Thin.woff2') format('woff2'),
url('RobotoSlab-Thin.woff') format('woff'),
url('RobotoSlab-Thin.ttf') format('truetype'),
url('RobotoSlab-Thin.svg') format('svg');
}The extra url links in the second example will allow your users to access the font using whatever file type their device takes, given you have downloaded that file type and placed it in your fonts folder. Notice that they are all accompanied by a “format” line of code so the system knows what its reading.
I should also note that in the url section of the code above, you can list it with the part of the file path and get the same result. I just found that it worked fine without having to list the file path, so I kept it simple. Here is what it would look like with the file path:
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
src: local('Roboto Slab Thin'), local('RobotoSlab-Thin'),
url(/assets/css/fonts/RobotoSlab-Thin.ttf) format('truetype');
}Step 5: Edit the CPLibraryAll.css File
Captivate creates a file called CPLibraryAll.css when you publish a project. What you need to do:
- Publish a Project
- Navigate to the CPLibraryAll.css file by unzipping then project then clicking: assets → css → CPLibraryAll.css
- Open CPLibraryAll.css and add the following line right at the top of the file: @import url(“../css/fonts/fonts.css”);
- “Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else (CSS Newbies).”
- Save and close CPLibraryAll.css.
- Note that each time you publish a Captivate package, you will need to unzip and add the aforementioned snippet of code to the CPLibraryAll.css file since we added it to a published project. Although, the fonts file will carry over each time since you put it in the applications folder.
Step 6: Test and Zip the folder up again
Next, it is important to make sure the fonts work when the HTML5 file is running. Open the index_scorm.html file for your project (located at the top level of your project’s folder structure) and the project should open in your default browser. If you can see all of the fonts that you added, you are ready to wrap things up!
All you need to do at this point is zip the file back up and upload it to your LMS. On a Mac, you will be “compressing” the file, which is the same as zipping it. Just right-click on the unzipped project folder and select the option to compress it.
Extra: Adding Multiple Fonts
Through trial and error, I learned that you can also use multiple fonts. To add multiple fonts, just make sure you have also added the ttf files (or other font files) to your “fonts” folder you created in Step 3. There are few caveats that made adding multiple fonts confusing until I played around with it:
- You have to make sure you have the file names exactly right when referencing them in the url section.
- You don’t need to add font-weight since it is already built into the font
- If you are using two fonts that have different weights and styles, you have to give them a different “font-family” name. This was by far the most confusing thing to me, since I initially assumed that all fonts in a family would fall under one name and the system would be able to determine from what I chose in Captivate which weight and style to use.
- Looking at my screenshot below I have Roboto Slab Thin and Robot Slab Bold. Without the distinct font-family names, one font usually ends up overriding the other.
- Note that the screenshot below also has the Raleway font declared. This was done to show that you can use multiple types of fonts as well.
Importing Directly From Google Fonts
Another option for getting fonts to work in your HMTL5 Captivate publication is importing the fonts directly from Google Fonts into your CPLibraryAll.css stylesheet.
Step 1: Go to Google Fonts to download and install the font you want
- Go to fonts.google.com and you can browse through the various fonts they have available. Once you find a font you like, click the small red plus button next to it to select it
- Next you will see a tab at the bottom of your screen indicated you have selected a font that you want to use. Click on the tab to open it
- Click “Customize” to add different font weights to the font you selected
- Download the font by clicking the icon in the top right corner of the pop-up box
- See instructions in method 1 for how to install and use the font you downloaded
I should note that I tried to take the @import link straight from the fonts.google site and paste it into my CPLibraryAll.css file as I did in method one. This only partially worked.At best, I was able to get the font imported using an @import snippet of code, but couldn’t get more than one font weight at a time.
To my delight, I discovered that you go to the source code through the “standard” link they provide for the font. What you need to do:
Copy the highlighted section (below) and paste it into your address bar.
It will take you to a page with all of the @font-face code for each weight of the font you selected.
Copy all of this code and do the following steps (note that these steps are identical to the first method except that you will be using the @font-face code from google).
Step 2: Locate the CSS folder in your Adobe Captivate Program folder
This step is fairly straightforward. Using a Mac, you will go to Finder and click on the applications folder, which may be on your Favorites sidebar or in your “Macintosh HD” directory. From here you will click through the following folders:
-> HTML → assets → css
In windows, the file path is:
C: → Program Files → Adobe → Adobe Captivate 9 → HTML → assets → css
Step 3: Create a Folder called Fonts
Right click and create a new folder called “fonts”. This is the folder where you can copy and paste fonts that you download from the internet that you plan to use for future projects. When I was exploring this, I had acquired some fonts from fonts.google.com for my project. There, you will receive .ttf files after you unzip the download. Those .ttf files should be dragged into the fonts folder you created.
Depending on the range of devices you are trying to make your project accessible to, you may have to go to other sites which provide every type of file format for the fonts. Aside from .ttf there are fonts with the extension eot, woff, woff2 and svg.
Step 4: Create a file called “Fonts.css” (different from method 1)
While you can do this step with a basic program like notepad, I would recommend using a web editing program like Adobe Dreamweaver. Once the file is created, you will paste the code in that you copied from the web browser.
Also, as I noted with adding multiple fonts, each font-family name with a different weight or style will have to have different font-family names for the system to recognize the different weights and styles. You can keep the other languages (eg. Greek) versions of the font. Just make sure if they are referring to the same font weight, if they have the same font-family name. All of the names you copied from google’s webpage will come over as the basic font name (i.e. “Roboto Slab” instead of “Roboto Slab Thin”). So, you will have to go through and add those by hand.
In the example below, I have two different languages (latin and latin-ext) with the Roboto Slab Thin font-family name and one Roboto Slab Light font-family in Cyrillic:
Step 5: Edit the CPLibraryAll.css File
Captivate creates a file called CPLibraryAll.css when you publish a project. What you need to do:
- Publish a Project
- Navigate to the CPLibraryAll.css file by unzipping then project then clicking: assets → css → CPLibraryAll.css
- Open CPLibraryAll.css and add the following line right at the top of the file: @import url(“../css/fonts/fonts.css”);
- “Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else (CSS Newbies).”
- Save and close CPLibraryAll.css
- Note that each time you publish a Captivate package, you will need to unzip and add this little snippet of code to the CPLibraryAll.css file. Although, the fonts file will carry over each time.
Step 6: Test and Zip the folder up again
Next, it is important to make sure the fonts work when the HTML5 file is running. Open the index_scorm.html file for your project (located at the top level of your project’s folder structure) and it should open in your default browser. If you can see all of the fonts that you added, you are ready to wrap things up!
All you need to do at this point is zip the file back up and upload it to your LMS. On a Mac, you will be “compressing” the file, which is the same as zipping it. Just right-click on the unzipped project folder and select the option to compress it.
Concluding Thoughts
Looking at both methods, I ultimately prefer the second one over the first method. Hosting the fonts on google is not as messy since I don’t need to have ttf files stored inside of my projects. Also, using the Google method gives you access to other languages. There was another method by Steven Warwrick on using Javascript within your course to use different fonts. While simple and elegant, I ran into an issue with trying to use this method with Captivate 9. However, I believe he was marketing this method to Captivate 2017 users. Also, with his method you cannot use multiple weights with fonts. It is nice to have all the weights available when you are seeking to create contrast. Therefore, I would recommend the second method above as the route to get the most variety with each font.
I hope you found this tutorial useful! Feel free to post comments with any questions.
