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
Noel Gorman

I have battled with this problem as well, and I've worked out a solution that allows an unsupported font to correctly appear in the HTML5 published file.

After you publish your presentation, navigate through the file folders: Storyline output > html5 > data > css.  You'll find a file there called output.min.  I recommend making a backup (i.e., copy, paste, and rename as "output-backup.min"), but that's optional.

The attached image describes the next steps.  Open the output.min file with Notepad.  Search the file for mentions of your font.  In the coding next to the font name is the source location ("src: url"), which may have the value 'null' listed (this was the culprit in my font not appearing correctly).  Replace that with your font file's name (filename and extension).  Continue searching for the font and repeat the process; it may show up in more than one location.  Save your changes to the output.min file.

The last thing you need to do is place a copy of the actual font file in the css folder.  From there, you're all set; just zip up the modified publish, and it should show up just as you see it in Storyline.

The only catch is that this solution won't work if you're directly uploading to Articulate 360 for collaborative reviews; you don't have any advance opportunities to tweak the CSS file before the upload.  Hope this helps!

Ashley Terwilliger

Hi Paul,

Thanks for sharing that image. What's the difference in those two fonts? Is the top one actually on an image, and inserted that way into Studio? 

If you're able to share that Presenter package with our team or upload it here in ELH it may be easier to take a look and test around what you're seeing. 

Jesse Kersey

Hi all, I'm having a similar issue to some in this chain. I have the most up-to date Storyline 3 updates. I am using an OTC font and it looks great in the working file, but when I preview, it all turns to gibberish. This is before publishing or loading in LMS. Any possible solutions? - Thanks!

Alyssa Gomez

Hi Jesse,

Yikes, that definitely doesn't look right! Have you tried enabling or disabling Modern Text

Just open your project, go to the Design tab on the Storyline ribbon, click the Fonts drop-down list, and select or de-select Use Modern Text at the bottom of the list. 

Let me know if that makes a difference!

Emerson Collins

Storyline 360 (Build 3.18.16333.0) using Classic Player
Browsers: Chrome and Firefox

We started off using Arial, preview displays a serif font. Switched to Open Sans, preview still displays a serif font. Set the default font in player Open Sans, set the theme font to Open Sans, changed font on the Master slide to Open Sans, changed any text on the screens with non-Open Sans font to Open Sans font, yet, some of the text still displays as serif fonts, similar to the screenshots provided by By Tom Gillespie (over a year ago). 

When using the Modern player, fonts displays correctly. 

Angie Elliott

Hello! Our entire development teams in 3 different departments are experiencing this issue when our users are viewing the content in our LMS via Internet Explorer. We do recommend to our learners that they should use Chrome for the most consistent experience, however, this is clearly an Articulate bug. The font we are trying to get to display correctly is...ARIAL. Yup, a very simple font. It's turning it into a serif font.

Do we have an ETA on when a bug fix will be deployed?

Ashley Terwilliger

Hi Angie,

Our team is still working on a fix for this issue where the fonts aren't displaying correctly, and while they finalize that you may also want to look at the workarounds and options detailed here.

We'll let folks know as soon as that fix is ready too, as there is not an ETA to share yet.

Rob Mcilwain

Can I ask if there has been any update regarding this issue for Storyline 3?

I currently have a client experiencing an issue where the course Arial font is being replaced by something that resembles Times New Roman.  If this hasn't been resolved then do we know what is generating this replacement font? It seems like everyone has the same Times New Roman type font as a replacement.

Thanks

Crystal Horn

Hello Rob.  Currently, if learners are seeing the wrong font in your courses, these are the steps that will help.  We are working on a fix for the publishing process to improve font rendering in the output, but we haven't finalized it at this point.  The fix will be released for Storyline 360 first, and then in the following Storyline 3 update.

I'm sorry I can't be more specific, but we'll definitely keep you posted with new information!