How to Use Google Fonts with Variable References
Have you ever wanted to display a variable reference in your Storyline course using a special font, only to find that it isn’t possible? Or maybe you noticed that the font used in a text entry field doesn’t look the same when your course is published?
This is because fonts can’t be embedded in the published output for variable text, which means that those viewing your course will see default system fonts instead.
Perhaps you also didn’t know that your variable references might look odd to others: meaning, since you have the right fonts installed on your computer, you’ll only see the issue if you test on a different device.
This issue has caused frustration for many developers since Storyline was first released. But now, if you are using either Storyline 3 or Storyline 360, there is something you can do about it!
In this tutorial, you’ll learn how to use web fonts to make sure that your variable references are displayed in a beautiful way, using the fonts you specify.
To start, let’s step back to see what the issue looks like in action.
The Problem
The slide below uses a font called Cardo. It’s a lovely font.
The next slide includes a text entry field where the learner can type in some information. When I test it on my computer, it looks perfect because I have the necessary font installed:
However, when viewed on a computer that doesn’t have that font installed, this is how that same slide looks:
Or perhaps you want to integrate a reference into a text box:
Only to find that rather than looking like this:
It ends up looking like this:
And that’s not right!
How Do You Fix This?
Thanks to the all-new HTML5 rendering engine in Storyline 3 and Storyline 360, there is now an easy fix for this as long as you are publishing to HTML5.
If you need a Flash fallback, that’s fine, but the Flash output won’t use your selected font to display the variable references.
Choose Your Font
First, you’ll need to choose the fonts that you want to use in your project. These may be determined by your company’s branding or style guide; but if not, then you should spend some time finding the perfect font.
There is a lot to consider when selecting fonts for your project. If you are new to the wonderful world of typography, then you should familiarize yourself with these 5 important rules of typography.
Make sure, when choosing a font, that it is available on Google Fonts so you can easily integrate it into your project.
Install the Font
Once you’ve selected the font you want to use, you’ll need to download and install it on your computer.
You can do this by clicking the Select This Font button in the top right of the font page:
A little notification will pop up in the bottom right corner of the browser showing that one font family has been selected.
If you click on that you’ll see the following information:
For now, all you should do is click the download icon in the top right to download a copy of the font to install locally (but don’t close this page yet, you’ll need to come back later!).
Installing the font in Windows is easy. Just unzip the file you downloaded, select your font, right-click, and press Install.
Note, if you have Storyline open while you do this, you’ll need to close it before it’ll recognize that your new font has been installed.
Then you’ll be able to use the font you’ve selected to format your variable references in Storyline.
Embed the Selected Fonts into Your Project
Now it’s time to do what was once impossible: embed your selected font into the published output so that your variable references can be displayed correctly.
Go to the slide master and create a new Execute JavaScript trigger that is set to run when the timeline starts.
Next you’ll need to click on the “…” next to Script (as shown above) so that you can enter the code that’ll make this work.
In the window that opens, please copy and paste this JavaScript:
if (/html5/.test(window.location.href)) {
if (!window.addedFont) {
var style = document.createElement("LINK");
style.setAttribute("rel", "stylesheet");
style.setAttribute("type", "text/css");
style.setAttribute("href", "https://fonts.googleapis.com/css?family=Cardo");
document.head.appendChild(style);
window.addedFont = true;
}
}
You’ll notice that the fifth line of code includes a mention of the Cardo font. This URL came from the Google Fonts page that we had open earlier:
If you are using a different font, then you’ll need to copy the correct link into your script. So, for example, if you wanted to use the Lato font instead, it would look like this in Google Fonts:
Which would mean that the JavaScript that you use in Storyline would be this:
if (/html5/.test(window.location.href)) {
if (!window.addedFont) {
var style = document.createElement("LINK");
style.setAttribute("rel", "stylesheet");
style.setAttribute("type", "text/css");
style.setAttribute("href", "https://fonts.googleapis.com/css?family=Lato");
document.head.appendChild(style);
window.addedFont = true;
}
}
This script checks if the learner is viewing the HTML5 output. If so, it adds the code necessary to the head of the HTML page for your selected font to work.
While this JavaScript will run each time a new slide loads, it will only add the code to the head of the HTML page if it isn’t already there.
Note that when previewing a slide in Storyline, you will receive a “Javascript support is not available while previewing” message. If this annoys you, just remove the code from the slide master until you’ve finished developing your course.
Now you just need to publish and share your course. And celebrate the fact that your variable references will now display in your selected font as long as the user is viewing the HTML5 output!
Click here to see this in action and here to download the .story file used to create this demo.
Matthew Bibby is an E-learning Consultant who can help you make complex things a lot less complex and boring things a lot less boring. He works closely with businesses to help them develop memorable, engaging, and profitable training programs. He’s a helpful chap who can usually be found hanging out on the E-Learning Heroes discussion boards. You can see more of his tutorials at matthewbibby.com or connect with him on LinkedIn.
15 Comments