Font displaying incorrectly

I have been using Storyline 2 up to this date and our company is starting to transfer to 360 because of the review feature. I have upgraded a previous project to test 360 and have encountered a font issue. 

The displays correctly in storyline 360 but upon previewing and publishing the font dramatically changes. You can see this in the screen shots provided, which is in a storyline that has been created from scratch. I have uninstalled the fonts and reinstalled them again and it doesn't seem to fix anything.

Any solutions?

70 Replies
Ashley Terwilliger

Hi Krzysztof, 

We've updated our system requirements to include allowing web font downloads in your browsers to ensure the right font shows in your output. More about those settings are found here.

Can you let me know if you are following the practices in this article and still seeing these issues? We're happy to work with you further on this!

James Jordan

Hi Ashley,

We have all the settings set as you suggested and we still get the following. It looks fine in Storyline 360, but we get this in the published output when running in SumTotal 18.3. Here's another bit of info I haven't seen mentioned before.  It works fine the first time I access it, but when I go into it subsequent times the fonts are messed up. We're using IE11.  It works fine when we publish as HTML5 and Flash, but we have an IS mandate to get rid of all Flash by the end of the year so we don't have a choice. We have to publish as HTML5 Only.

 

Lauren Connelly

Hi James!

I appreciate you sharing the screenshot! It's always helpful to see a glimpse of the issue. 

We are also doing everything we can to eliminate all traces of Flash!

The first step I'd recommend taking is publishing the course to SCORM cloud in IE11. This will give us a clear look at if your specific error is an inconsistency in Internet Explorer or an LMS.

Please keep me posted in this discussion!

Robert Valdez

There's a good walk through for replacing your custom fonts to native fonts here: https://community.articulate.com/series/articulate-storyline-360/articles/articulate-storyline-360-user-guide-how-to-replace-fonts

There was minimal text box size adjustments that needed to be made when I converted Gotham fonts to their Arial equivalents.

Steven W

Is there any update on solving this issues at the Articulate level? We have many courses that are  deployed to dozens of LMS environments and this has been an issue for many of our largest customers. We have had some success with getting their IT teams to adjust IE settings to allow  fonts, but we have received plenty of pushback on this.

It's truly unfortunate that so many large corporations and governments are still using IE in this day and age, but we come across this regularly and will continue to do so until IE 11 fades into the sunset. Even more unfortunate is that IE's Support Lifecycle is tied to Windows, so we will be stuck having to deal with IE for the foreseeable future as Windows 10 has support to 2025. A fix at the Storyline 360 level is the ideal solution when you consider how long IE will be around for. 

James Jordan

Hi Steven,

I have a fix that I’m testing this week. I’ll let you know how it goes. We’re an On Premise SumTotal customer. We use remote content servers and looking at the fiddler traces I noticed font-awesome.css kept coming up with a 404 error. This isn’t in the Storyline folder, it’s checking in the SumTotal player folder. I copied it to our TEST remote content server and performed a smoke test. It seemed to work, but I need to do more testing in staging. Articulate needs to put this css file and all references to it in the Storyline folder when it gets published. This style sheet is required to allow HTML5 fonts to display correctly. Not sure why it only happens on the second launch though. I’d love to compare our experiences. My number is (813) 300-5769. Email, call, or text and maybe we can figure this out on our own.

Have a great day!

James

Get Outlook for iOS

Katie Riggio

Hello All!

Thank you for sharing your experiences throughout this discussion.

There a few posts asking for updates around font downloads, so I'd love to share more about why this is happening and how we're moving forward:

  • Why: Storyline 360 and Storyline 3 use web fonts (WOFF files) and require font downloads to display content just how you've designed it. When font downloads are disabled in IE—typically by a system admin—the player can't download the fonts it needs to display the course correctly.
  • How: We've determined that the best way to serve our customers' needs is to continue to require font downloading, just like we require having JavaScript and other browser features enabled. We've revised our documentation to make this clear. As a prerequisite, learners using IE (or their IT teams) should enable font downloads to allow courses to display as intended.

Check out Leslie's response for full context, where she offers more insight into what we've done to try to mitigate this problem.

If you're seeing something different in your course or have any questions, free to reply here or reach out to our Support Engineers through this link. We're here to help you. 

Lorna Rose

Hi, I am doing some work for a client who uses Open Sans font.  It all looks great both in Rise and when produced until I put any text into bold.  The i's then become I's.  I've tried different browsers and it has no impact and i've tried typing in Open Sans in Word and the i's are fine.  Any thoughts as to what might be causing this as i have a lot of content to produce for this client and Open Sans is their house font.   Thank you 

Katie Riggio

Hi Lorna!

Thanks for attaching a visual and for those helpful clues.

I'm having trouble recreating the problem in a sample Rise 360 course across various browsers. Here's the Share link.

As a good first step, let's try these quick 4 steps from the How to Get Non-Latin Characters to Display Properly guide:

  1. Search the Google Fonts website for the fonts you need. If you're looking for a font set in a different language, use this method to choose your language of choice. You can also jump directly to this default Rise font: Open Sans
  2. When you find the font you want, click Download family. This downloads the entire font family, including the missing glyphs displayed on the font's page.
  3. Unzip the folder somewhere you’ll be able to find it easily.
  4. Follow these steps to upload your custom fonts to Rise 360.

Let me know if you see an improvement after that!