The visual impression of layout and typeface can be profound — something that impacts you long before the actual recognition of meaning. Like art, your impression is immediate and yet mostly unconscious.
The use of custom fonts is now commonplace on the web, as a critical element of that visceral first impression. This has been primarily driven by the ability in HTML5 to load fonts from external sources as part of the page, rather than from the operating system. Google provides a vast set of such “web fonts” that can be integrated onto a page with just a few lines of HTML, completely for free.
In HTML5 based Captivate modules, it has been common practice to limit ourselves to the use of fonts guaranteed to be available in all browsers: Ariel, Courier New, Georgia, HelvaticaNeue, Times New Roman, Trebuchet MS, and Verdana. Captivate highlights those fonts as “web fonts” in the text styling menu. The more numerous “System Fonts”, which are listed next are not recommended for web deployment as they only display correctly on systems that have pre-loaded those fonts into the operating system ( Windows/IOS ). Further, until Captivate added the “responsive” design capability, fonts could look terrible when viewed a non-standard screen resolutions. We use the responsive project type exclusively to avoid this problem.
In this short article, we will see how to both display google web fonts during our design process, and ensure that they will be seen by the user. The strategy is remarkably simple. It does not require any “post processing” or modification of the captivate published modules, but does assume that the user is viewing the module on a web browser that has access to the internet. This means that the font data is pulled from Google’s servers at the time the module is loaded.
Loading Google fonts into Captivate
Google fonts can be found here. There are hundreds of fonts to choose from and it is easy to get lost in just poking around the different styles. We will use the beautiful Calligrafitti for this example. After selecting the font, it is possible to open a small window that provides the needed information for linking to, and downloading the font files. To add the font to Captivate, you download the zipped font file and install it as a system font Windows/IOS. In Windows, this simply means unzipping this file, selecting the .ttf files, a right-click to open the ttf file into the font preview window which has a button to install the font.
Google also provides the URL information needed to link to the cloud version of the font in the “import” section after selecting the font to download. Copy this for use later:
<link href="https://fonts.googleapis.com/css?family=Calligraffitti" rel="stylesheet">
The next time Captivate is opened, the Calligraffitti font will show up as a system font. Any text styled with the font will render correctly. Even “previewing” and “publishing” will display the font as it is now installed on your system. This is misleading — if your users don’t have the Calligrafitti font loaded on their system, it will not be seen. It is the next step that is critical for making the font work generally.
Loading Google fonts as part of the module
Ensuring that any user will see this font turns out to be remarkably simple. By adding the following lines of code to the first page of your presentation using “On Enter Execute Javascript”, the browser will load the font directly from Google when the module is opened:
var fontLink = '<link href="https://fonts.googleapis.com/css?family=Calligraffitti" rel="stylesheet">'
$(fontLink).appendTo("head")
Since browsers will cache ( hold on to.. ) font files, the font is retrieved only once from Google’s servers. Note that this technique doesn’t require modifying any of the published files. All of the magic occurs in the javascript.
As you can imagine, you can use this technique to load as many different font types as you like. Any font styling that you see works in Captivate, such as bold or italic, will work as well when published. Although we’ve shown how to load Google fonts, any other cloud based font with a downloadable system font can work the same.
There are a few other cases that can show up:
- When users are not guaranteed to be connected to the internet when they open the module, or the connection to Google is very slow.
- You wish to use a font that doesn’t have a corresponding system font that can be loaded into the OS.
In the first case, it is possible to download the web font files and either include them in the captivate module after publication, or in a separate directory on the module’s server. By simply changing the <link> href address, the browser can locate the files. Both of these cases are more “fragile” in that they can depend on the directory structure where the module is loaded.
Using fonts that do not have a corresponding system font
In the second case, although you would not be able to see the font inside captivate, it is actually possible to force a particular shape to display text using a web font that captivate doesn’t have built in. We do this using a “named” shape. In this case, shapes that have a unique ID or “shape name” can be forced to use a specific font. The following code shows how:
var shapeID = "callig";
var fontLink = '<link href="https://fonts.googleapis.com/css?family=Calligraffitti" rel="stylesheet">';
$(fontLink).appendTo("head");
domStyle = $('<style> .' + shapeID + ' .cp-actualText {font-family: "Calligraffitti regular", Calligraffitti !important ;} </style>');
domStyle.appendTo('head');
$('[id^=re-'+shapeID+']').addClass(shapeID);
Any shape that has been given a shape name that starts with the letters “callig” will have this font. This enables multiple shape with names like callig_1, callig_2 etc. Since Captivate tends to create shape IDs using this convention automatically, duplicating shapes will keep the font the same.
Note that this technique is ONLY needed in cases where you wish to use a web-font that either there is no system font you can simply add to Captivate, or you prefer not to.
Extra Credit
For folks curious about why the above code is needed, as it turns out, Captivate doesn’t actually create the text elements until the time they are “played” and the elements themselves carry their font information, so changing the font has to be done in a more indirect way.
This technique first finds the “wrapper” DIV where the text will be placed based by looking at the ID. A custom class is added to the DIV to signal that text in this wrapper will have a different font. Next, a style is added that addresses any text-carrying elements in that class. Text elements in Captivate all have a class “cp-actualText”. In this style, the font is specified and overrides the default font using the “!important” tag.
There is no embed code to copy when I’m in the google fonts website. Is anyone else having trouble with that step? I’m trying to install albert sans and noto serif georgian. Thank you
Thank you for the helpful article!
It might be worth noting that the JavaScript code has to be implemented in Captivate using ; (semicolon) after both lines.
While it probably seems obvious to regular JS users, this might cause trouble in achieving the desired outcome of the language load as the semicolon is not displayed in the code above.
How would you do it if it is a two word or 3-word font family name? For example, Libre Barcode 39 Extended
Thank you!
Yes, this is a great solution. I wished Steve contributed more articles.
Hey, Paul… if you load the fonts on the first slide and then exit the course prematurely and re-enter, you lose the fonts (I tested on SCORM). Anyway of loading the script without having to put this code on every slide?
Thank you… especially for the tip about always using the responsive format to get a better results with fonts!
The first time I added the javascript it worked beautifully. But with the latest versions of the modules I worked on, the fonts do not show when played in other computers. I don’t know what is going on. has anyone have the same problem?
What about non google fonts. I’m using fonts specific to our company. I looked at Google Fonts and there aren’t any that are even close. Specifically I’m looking at Futura and Trade Gothic. We use them for every e-learning we produce for our company.
It worked, when I tested the .html file on another computer. But when is published on the LMS it doesn’t work anymore. Any guess of what it could be?
I am having the same issue
GCampos
I am having a similar issue to Mark Altin. I was able to install the google font on my system and see it in the captivate project after applying the JavaScript code as an action, however fonts with multiple weights were not shown, but rather all text under the same font appeared as the same weight. Is there additional code that needs to be added to differentiate between what weights of the font should be shown?
Have you found any solution to this problem? It happened the same on my project.
Very useful. Thanks!
Hey Steve, can you tell me how to use multiple fonts in the line of javascript you posted above?
Just copy the same lines above, leaving off the “var” and just replace the links with the other ones you need
fontLink = ”
$(fontLink).appendTo(“head”)
fontLink = ”
$(fontLink).appendTo(“head”)
Thank you very much! I will use this in every project going forward!
With this approach, I noticed that the system fonts are labeled with weight words (such as “Roboto black”. The cloud link for web fonts uses the family and weight value (such as font-family:Roboto; font-weight: 900;).
Captivate sets the font family to the system font with just the family as the fall back (like such, font-family: “Roboto black”, Roboto;). How do you set the appropriate weight for the web font?
Thanks again for this tip, Steven. I’m just starting my first production project using ver 2017 and was planning to use a TypeKit font for the first time. However, this doesn’t seem particularly intuitive, and there wasn’t a suitable font. I can’t help feeling it’s just a cynical attempt by Adobe to get people to sign up to the full TypeKit database. The google fonts are free, your method is extremely simple and it turns out that the google font ‘istok’ is almost identical to the NHS ‘frutiger’ font.
A very helpful article! :+1:
I found your article revealing to solve this big issue about Using creative fonts far from the System ones. BUT i’m stuck with an unsolved mystery that kills my “no programmer brain”. I downloaded a Captivate interaction in E-learning brothers that works perfectly with Google fonts… and I wanted to implement it in my project (copy slide… Paste Slide), but suddenly the perfect fonts view totally vanish.
After some minutes checking the code loaded as a Script and all de stuff, the only one conclusion is that in my BLANK (non responsive) project the Google font benefits disappear… 🙁
Any help will be welcomed!
NOTE: I converted the project both ways to Responsive and Blank and just when in Responsive the Fonts are represented in it’s best shape when zooming. If in the blank project… they just appear as pixelated images.
Thanks in Advance!
SOURCE: (http://library.elearningbrothers.com/product/9274590-New-Stone-Checkbox-Captivate-Interaction)
you may be running into a fundamental limitation with captivate. I believe that in non-responsive projects, fonts are not displayed using the browser’s high-quality font display engine, but use a low quality approach ( I will skip providing the details.. ). this should be something you see with all fonts, not just any “special” fonts you have added.
Thank you very much for your Fast fast reply Mr. Steven!
I hope I got the right meaning from your reply (for a European with “some” basic english language skills… sorry). 🙂
What you explain is that BLANk projects (non responsive) skip totally the implementation of HTML5 use of online Fonts?
That would be a tragedy (for me) as I understood that the only one limitation when choosing blank instead of responsive was the ability of resize/adapt automatically to different screens.
When I develop my projects I decided just “one size” as the client’s LMS/SCORMs are played in regular Computers.
BUT as a “modern” man (and Rookie E-learning developer) I chose HTM5 output and scaleable format for my projects, thinking I would get the playing benefits of this modern format 🙁
FINAL NOTE: I mainly use SVG graphics and pure Captivate Text to get a perfect view of the project in any screen size (or that was my intention)..
Again, any light, sunbeam or suggestion will be welcomed as once again I’m at a dead end.
PS: Thanks also to Mr. Paul Wilson for all the infinite hours of E-learning classes. I applied hundred of their advices and techniques. 🙂
You’re welcome.
This is really cool Steven. I will definitely use this in the future.
Great article, thanks for sharing. We did actually run into a font issue in a recent project that turned out to be related to standard Microsoft fonts vs standard Mac fonts.
You must be logged in to post a comment.
