When you’re designing e-learning, the text you use is one of the biggest ways you can communicate with your learners. And beyond the words themselves, the fonts you choose for styling your text should complement and reinforce the subject matter of the course—working in harmony with the other visual design elements to subtly signal the importance of the information you’re sharing.
Most of today’s computers come with a library of installed fonts, known as system fonts. Those system fonts are typically fine for grunt work like email, spreadsheets, and documents, but sometimes those fonts just aren’t the right fit for the creative work of e-learning design. When your design calls for a specific look and feel, you might need to look beyond system fonts for something with a little more personality.
Thankfully, tons of websites offer fonts for sale or for free. But that opens up another set of questions: How do you know which is better quality—paid or free? And what do you need to know about working with these new fonts once you get them into Storyline 360?
I’ve done some digging to get you answers to these questions and more. So let’s take a look at what I’ve found and along the way I’ll share some tips for sourcing fonts and then working with them in Storyline 360.
Finding Fonts for Your Storyline 360 Projects
You’ve got a special project coming up and you’d really like to find a font that will work with the subject matter. Where to start?
The internet, of course! Finding fonts on the web these days is super-easy; so easy it can be hard to tell which ones are safe to use. Let’s break down the fundamental differences between free and paid fonts.
Free fonts are obviously easiest on the old pocketbook, and they’re great when you’re looking to prototype with some different visual design options.
However, free fonts do come with some limitations. For instance, it’s common for font designers to offer the free version of their font in only one stroke weight, like bold, light, or regular. All of the other stroke weights cost money.
Also, with free fonts, you tend to get what you’ve paid for. Font designers might not invest as much time on the fine details with a font they’re giving away for free. They might cut corners on things like proper kerning (the spacing between characters) or they might choose to leave out special characters entirely. Fonts that aren’t properly kerned can be hard to read and might not render or scale well on different devices. And missing special characters can force you to use a mish-mash of similar fonts to try and maintain some visual cohesion in your design.
A final drawback with free fonts is that they are often just stolen licensed fonts, repackaged with the copyright removed. This means you could end up using a “free” front illegally. Yikes!
How can you play it safe with free fonts? Well, just as you would with any other asset, always check the licensing to make sure it’s free for commercial use. When you download the font file, look for a readme text file in the zip folder. These generally contain the licensing terms and conditions. If your downloaded “free” font doesn’t have these terms and conditions spelled out … be suspicious.
There are many great sources for free, high-quality fonts on the web that are on the up-and-up; my go-to is Google Fonts. These fonts are open-source web fonts and I use a ton of them in my Storyline 360 projects. I love that there’s a variety of styles to choose from, and Google Fonts always look great and provide a full set of special characters for me to work with.
One last note about free fonts: Although some pre-installed Windows Fonts can be published to the web without purchasing an additional license, others like Arial, are owned by Monotype and are subject to a web font license. Personally, I’ve found Open Sans, Lato, and Source Sans Pro—free web fonts installed with Storyline 360—to be good substitutes for Arial. But if you’re already using a lot of Arial in your e-learning, you'll want to learn more about Monotype licensing here.
If you have the budget for assets, why hassle with free when you can just purchase a font for your project? Fonts for purchase tend (not always but often) to be higher quality and are more likely to give you a full assortment of stroke weights and special characters to use. Also, purchasing a font might mitigate concerns about how legal your chosen font is to use.
One drawback with using paid fonts is that less expensive ones often suffer from the same quality issues as free ones (see “Free Fonts,” above). Also, you might find font licensing is a little tricky. Some font designers require you to pay for separate licenses for print and web versions of the font. As such, once again it pays to read the fine print to make sure the font you’ve purchased can be used in the ways you intend to use it.
Before You Use Custom Fonts in Your Storyline 360 Project
Whether you choose to go with free or paid custom fonts, here’s a handy tip: create a test project using your font of choice and publish it in Storyline 360. Upload the published output to the environment your learners will view it on. Test this published course on any devices learners will view it from, including desktops, smartphones, and tablets. Make sure that the font you’ve chosen is rendered correctly across these devices and their web browsers. If it’s not rendering correctly or doesn’t scale well, this step will save you some time-consuming rework later on.
On the other hand, if you’re satisfied it’s clear and legible and it’s working wherever you need it to work, you’re ready to add it to your Storyline 360 project. So let’s talk about that next.
Working with Fonts in Storyline 360
At this point, you’ve gathered all of your content sources, design docs, and assets (including fonts). You’ve done some quick testing to make sure your custom fonts look great. Now you’re ready to get to work, so here are some font-specific things to know as you assemble your project.
First things first: when you install Storyline 360, you’re also getting an assortment of popular open-source web fonts (Lato, Open Sans, and Montserrat, to name a few). Here’s a full list of the installed fonts in case you’re curious.
If you’re already running Storyline 360, when you open an existing project, Storyline 360 will scan your project and let you know if any of the fonts you’ve used are missing from your computer so you can install or replace them.
Once you’ve installed any custom fonts you’ve downloaded to your system (you can check out installation instructions here), they’ll automatically appear in the fonts drop-down list in Storyline 360 the next time you open up the application.
Pro tip: If you install fonts while Storyline 360 is open, you’ll need to close Storyline 360 and then reopen it to see your newly installed fonts.
It’s also worth noting that Storyline 360 does not support Adobe Type 1 PostScript fonts. However, it does support Adobe TrueType and OpenType fonts. You can learn more about how to tell if you have PostScript fonts in your project by following the instructions in this support article, Storyline 360: Adobe Type 1 PostScript Fonts Aren’t Supported.
Taking Advantage of Modern Text Rendering
Storyline 360 uses the latest text-rendering technology to make sure your text flows beautifully with consistent spacing, and that it’s legible on every device. Any new projects you’re creating in Storyline 360 will automatically take advantage of these improvements without you needing to lift a finger!
However, if you’re working with an existing, older Storyline project, that project might still be using classic text. To see if your project is using classic or modern text, just open up your project and go to the design tab on the ribbon. Click on the fonts drop-down and look at the bottom of the list. You'll see a checkmark next to Use Modern Text if your project is using modern text. If there's no checkmark there, click the box next to Use Modern Text to convert your entire project. Here’s a quick .GIF to show you where to find the Use Modern Text setting:
You can read more about modern text rendering in this article: Storyline 360 Modern Text Rendering.
Tips and Timesavers for Working with Fonts in Storyline 360
With your Storyline 360 project underway, here are some things you can do to make working with custom fonts even faster and easier.
Use Design Themes
Design themes in Storyline 360 work similarly to design themes in PowerPoint and they allow you to quickly give your course a more consistent visual design. Design themes encompass visual characteristics like theme colors, theme fonts, slide masters, and feedback masters.
Each font theme specifies both a heading and a body font to be applied to your project. The heading font is automatically applied to slide titles, question text, and marker titles. The body font is automatically applied to slide text, including shapes, captions, and buttons, as well as quiz answer options and marker descriptions.
To use your newly installed custom fonts throughout a new Storyline 360 project, you can create your own custom design theme based on one of the built-in themes. The process is pretty straightforward and you can read about how to do it in this article: Storyline 360 Working with Theme Fonts.
Use Find and Replace to Quickly Switch Up Fonts
What about changing a custom font in an existing Storyline 360 project? One way is to customize the theme font, as I mentioned above.
But an even easier way is to use the find and replace feature. Simply choose the font you want to replace and the font you want to use instead and Storyline 360 will do the rest! Here’s the low-down on how it works:
- On the home tab on the Storyline 360 ribbon, click the drop-down arrow next to Find/Replace. Choose Replace Fonts.
- Use the “Replace” drop-down to select the font you want to replace.
- Use the “With” drop-down to choose the new replacement font and then click Replace.
- That’s all there is to it!
And here’s another .GIF to show you the above steps in action.
We’ve covered a lot of turf here and yet we’ve only scratched the surface of this topic. There are all sorts of great tips out there for managing and working with fonts—and the E-Learning Heroes community is the best place to find them!
If I’ve left any of your font questions unanswered, take advantage of our discussion forums for some quick answers.
What are your favorite sources for finding custom fonts? What are your tips and tricks for working with them in Storyline 360? Share your comments with me, below. I’d love to hear from you!
Want to try something you learned here, but don’t have Articulate 360? Start a free 60-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.