texture-1362879_1920.jpg

USING WEB FONTS IN ADOBE CAPTIVATE

Steven Warwick
March 1, 2017

The visual impression of layout and typeface can be profound — something that impacts you long before the actual recognition of meaning. Like art, the you 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 effectively design modules using google web fonts and to ensure that they will be seen by the user. The strategy is remarkably simple. It does not require any “post processing” of the published module, 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:

ar 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.