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?
\nThis 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.
\nPerhaps 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.
\nThis 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!
\nIn 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.
\nTo start, let’s step back to see what the issue looks like in action.
\nThe slide below uses a font called Cardo. It’s a lovely font.
\nThe 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:
\n![\"\"](\"https://lh4.googleusercontent.com/efnrqOm7VPi-uD582uHSnsFPSyuXj9V8dKYoJ04UDyGQJZiDV-dmz2AA96vL7hZGcNd7Ecd47drzeAXV6RQ9Un-IQI1pKdWO_vduqzhtJHxuFMQhqUqEFd20vocq9jLPuoqu2RPh\")
However, when viewed on a computer that doesn’t have that font installed, this is how that same slide looks:
\nOr perhaps you want to integrate a reference into a text box:
\nOnly to find that rather than looking like this:
\n![\"\"](\"https://lh4.googleusercontent.com/F4s57ybRdyYeX-0gk8cmcYlxi2ZVcl1RHSAcOvxwtquLJbjrrsXMouFNlQZsp3Jhy1uZOnfWk0fA9jaYiwGVk12T3HAvrsgRE9ZKtxg0R_yL3UvC1IwCqf7nsWbgRYTVnvmHGRrB\")
It ends up looking like this:
\nAnd that’s not right!
\nThanks 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.
\nIf you need a Flash fallback, that’s fine, but the Flash output won’t use your selected font to display the variable references.
\nFirst, 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.
\nThere 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.
\nMake sure, when choosing a font, that it is available on Google Fonts so you can easily integrate it into your project.
\nOnce you’ve selected the font you want to use, you’ll need to download and install it on your computer.
\nYou can do this by clicking the Select This Font button in the top right of the font page:
\nA little notification will pop up in the bottom right corner of the browser showing that one font family has been selected.
\n![\"\"](\"https://lh4.googleusercontent.com/tey2iF5J3CeFzd_3cHTyqBlGVwaUBDjRWzb664K8kDwZhxcUvyJbppDain1vMPv6pgik88NoTkN22QoXljAxCl16GxODWNTzAfGTVgm7S6C70Gf7GUYm5GyuqjFbOPkBWSR925j7\")
If you click on that you’ll see the following information:
\n![\"\"](\"https://lh6.googleusercontent.com/P5a4otLm2B1fPZ71IvjAWg2SkX_y3QjflIVi7Bik-lpWZXEGsaJAx1BWoL3Jtnv3euf35ad5qipG8zzJvzs5pG-OEnC6ceyrwIj9IIl1UWVJ4FBgR0muXs72VqCyjoZYtmFkGVLT\")
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!).
\nInstalling the font in Windows is easy. Just unzip the file you downloaded, select your font, right-click, and press Install.
\nNote, 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.
\nThen you’ll be able to use the font you’ve selected to format your variable references in Storyline.
\n![\"\"](\"https://lh4.googleusercontent.com/UUsu24B6qZxBY4_eb7F-d0qszU38y6GnFQC9gE45lnub01EagZbFLKarZ-2JO7jRvFncbU6ljINi9IdP-WhMRDGNy7WXEDsMWqtm4i5pBExKuj_tGaabkZqDgH8v9MI5MfacLBD5\")
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.
\nGo to the slide master and create a new Execute JavaScript trigger that is set to run when the timeline starts.
\nNext 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.
\nIn the window that opens, please copy and paste this JavaScript:
\nif (/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:
\nIf 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:
\n![\"\"](\"https://lh5.googleusercontent.com/iXhSafOKE1xinHQ4DRbgiLW4occHyt4-0Xa9RPKLBg09YYlue0FH1XIjpnUbbAdcw5DMa00Y1VWy92BuxVDOQURYbvj4fZpvBno6ntOfQJNCQC3OK8-8wKsYyeXbcpgRvnL1ib_S\")
Which would mean that the JavaScript that you use in Storyline would be this:
\nif (/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.
\nWhile 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.
\nNote 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.
\nNow 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!
\nClick here to see this in action and here to download the .story file used to create this demo.
\nMatthew 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.
\n
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?
\nThis 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.
\nPerhaps 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.
\nThis 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!
\nIn 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.
\nTo start, let’s step back to see what the issue looks like in action.
\nThe slide below uses a font called Cardo. It’s a lovely font.
\nThe 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:
\n
However, when viewed on a computer that doesn’t have that font installed, this is how that same slide looks:
\nOr perhaps you want to integrate a reference into a text box:
\nOnly to find that rather than looking like this:
\n
It ends up looking like this:
\nAnd that’s not right!
\nThanks 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.
\nIf you need a Flash fallback, that’s fine, but the Flash output won’t use your selected font to display the variable references.
\nFirst, 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.
\nThere 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.
\nMake sure, when choosing a font, that it is available on Google Fonts so you can easily integrate it into your project.
\nOnce you’ve selected the font you want to use, you’ll need to download and install it on your computer.
\nYou can do this by clicking the Select This Font button in the top right of the font page:
\nA little notification will pop up in the bottom right corner of the browser showing that one font family has been selected.
\n
If you click on that you’ll see the following information:
\n
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!).
\nInstalling the font in Windows is easy. Just unzip the file you downloaded, select your font, right-click, and press Install.
\nNote, 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.
\nThen you’ll be able to use the font you’ve selected to format your variable references in Storyline.
\n
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.
\nGo to the slide master and create a new Execute JavaScript trigger that is set to run when the timeline starts.
\nNext 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.
\nIn the window that opens, please copy and paste this JavaScript:
\nif (/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:
\nIf 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:
\n
Which would mean that the JavaScript that you use in Storyline would be this:
\nif (/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.
\nWhile 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.
\nNote 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.
\nNow 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!
\nClick here to see this in action and here to download the .story file used to create this demo.
\nMatthew 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.
![\"\"](\"https://lh5.googleusercontent.com/nR-NZDwyf0LcwhGPpFdYuf5XWD96SSZEeFfNRj6cdrl14R_sXC48FYAo_RjtTGNbGYTehoVnUY2Y7jFG16qb6eSKQLE3ty3IioByhDDEKYvRKj90Zn7lRGHgqAek3ecv6GsIW6g9\")
![\"\"](\"https://lh5.googleusercontent.com/-GQvXXMZEWRQyg4GAFFZHsAz0IQbJqwt0UtYQENp8z3IcS4mgIDYldid-ksqKe4PpIuN-yei6vRxd7TNh1v3DkxoJSS53WOf1Y-wVNLqF204pEQKz-cwUhpmVjsIz_7dN7HLJWKg\")
![\"\"](\"https://lh3.googleusercontent.com/lhKX9nE_cAlLun9n9cdF06zYFMKoI8adiZSX_JtFTxZHIx6nG3Mvp3Ja4noCOSADBcpBB3LOzxSQjP-GZoRSgLNFgODGq166j2Q-D_zbicjXd1dUvOvK_aJgzk052BI2APh2N4v0\")
![\"\"](\"https://lh4.googleusercontent.com/WJzuXC3SlJvv3BJh6EAp7BhyD6lYf2Ve8tcxSrLDJiyB3h-xkCVafPQ28lMXueGHZyqdGCv0bhzxm0RWOBczAhntWcsqPUrecVQeEVhKvhgtbQ_3Zu4L8eGyyNTm8y59xa3d8xj_\")
![\"\"](\"https://lh4.googleusercontent.com/rFiZlAi9KjZLsYrxYb5GHRiCyHuBnNpz8UrBBEVZIdk_AOQys636xH352IgIIkQU8TikOnOnXL18xjm6jj8rxCUVWZLFmCvFNa10FJbz-6ora-zdZgx8LKDvTasydk5xwf5Yx5TH\")
![\"\"](\"https://lh5.googleusercontent.com/tEwNpBdn_hnfRkeiHrXqgBaJVYcUBYEIBeseb7Ve2ZL3dIWmwrPDG9_0sXoNt_m-4G14mUwytnIjrT9X0WWMaPZpbdMFiVSkHsAU_ASvAxG4TK0G2SKldIXPibelphPW7IUcUVxl\")
![\"\"](\"https://lh3.googleusercontent.com/NKERiIOoo0zCbjjgz6uwqJHhmCyr3CkXxMVlnCOIOl8zoy25-dl_JDR_EDb5MZvs1hGRsurVaNKSXfHcpqn_tQ3C8iFqEdNASkgyXK1moOYMd_F9UOsts3QfM1mtKi7koQUfs8MT\")
![\"\"](\"https://lh6.googleusercontent.com/FdhueufssfmMiky0FqbAy6eflh3R3GSvCfp_t3h79qP3KOemIDf12xxsLHGsDfonPNfq4rRk04x5H-PYAg9DhUnk-qvtMkho5hN2dyNbBkL1AZ90YXE8mGF-V2A26gY8SkFk1Xex\")