Notification
Newbie
6 posts
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.
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.
You must be logged in to post a comment.
- Most Recent
- Most Relevant
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
