Font displaying incorrectly

Mar 14, 2017

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
Alyssa Gomez

Hi there Tom,

Thanks so much for sharing those screenshots. We are aware of an issue in Storyline 360 where fonts are displayed differently in published output for HTML5. It was reported here and here previously in the forums, in case you want to read a bit more about it. We are actively working on this bug, and we'll definitely let you know when we know more. I'd like to include your experience in our bug report, since that helps us prioritize our development resources. Can you tell me which font you were using here--was it the Univers font? 

Michael K

I have a similar or maybe even the same issue. Our corporate font is normally displayed in SL3, but once exported or in preview I just get nonsense (see screenshots). In SL2 the font works without problems. Interestingly, our second font (a thinner version) works without any issues in SL3. 

Any ideas, how I could solve that problem?

Hazel Brewer

Hi there

We have just upgraded to SL3 from SL2 and I am experiencing issues with the font Fruitger 45 (light and bold) displaying differently in preview to on the slides. My colleague has no problems with hers and the same font. The only difference we can think of is that I had a free trial (months ago) with SL360 and it was on my computer on my desktop and my colleague didn't. Not sure if this would've caused problems but I have uninstalled all versions of SL off my computer, uninstalled the font and reinstalled the font and SL3. Still having the same problem though. I cannot publish the file without the font displaying differently and it's really affecting productivity. Please can someone help.

I have attached screen shots of the preview and slide version displaying the fonts differently.

Ashley Terwilliger-Pollard

Hi  Hazel,

Having the trial of Storyline 360 shouldn't have an impact on this - but always good to uninstall it if you won't be using it. 

When you shared the screenshots, it's the slide stage vs. the preview, or the publish vs. the preview? I wasn't sure which - also which example is it showing as you'd expect (my guess is preview)? If it's in the published output that you're seeing the issue can you tell me where you're hosting the course and what browser you're viewing it in? 

Does your colleague run into any issues with files you share with her, or vice a versa? Have you tried this font in a file that you created newly in Storyline 3 - does that behave any differently than Storyline 2? 

Hazel Brewer

Hi Ashley

The font isn't displaying correctly in Preview or when published  (it displays all bold and completely different font). The screen shots show the preview and slide view- the one that is incorrect is named "in preview". Also the published output (tried in both HTML only and HTML with flash back up) that displays incorrectly is when I view it after I have published it - this is opened in chrome.

My colleague has opened the same files as me and has no trouble previewing them correctly.

When I open my colleagues files or create new ones the same problem occurs.

Many thanks

Hazel

Ashley Terwilliger-Pollard

Hi Hazel,

When you're viewing the published output have you upload to your web server or LMS? If you're viewing it locally I'd look at attempting that to see if there is a difference.

Are you and your colleague also publishing the same way (i.e. to web vs. lms? to a local drive)? When you're opening files from your colleagues - how are they sharing them with you? Are you following along with the guidelines here? Are you both using the same version/update of Storyline?

Alka Goel

Hello Ashley! your post is 2 months old, wonder if there is a resolution to this. The font in my course looked fine in development, in preview, in SCORM Cloud, and also when published to LMS when launched using Chrome, however when launching the course in IE11 it displays weirdly (pls see attachment). My coworker also tested and is having the same experience on her computer. Please help!

Leslie McKerchie

Hello Alka!

Sorry to hear that you've run into an issue with this. Are you using Storyline 360?

We've seen an issue with users who have the font download option disabled in Internet Explorer.

Here's how you can check that:

  1. Internet options
  2. Security tab
  3. Internet
  4. “Custom Level”
  5. Downloads
  6. Font download
  7. Select “Enable” - Image here
Ashley Terwilliger-Pollard

Hi all, 

A quick update on this issue where learners may see the wrong font or missing letters in published content when all these conditions are true:

  • They’re viewing HTML5 output from Storyline 360, Studio 360, or Storyline 3.
  • They’re using Internet Explorer.
  • The font download setting is disabled in Internet Explorer.

Our team confirmed that this was specific to a IE setting for fonts with HTML5 output, and as such you'll want to take a look at these methods to overcome this issue:

Let us know if you have any other questions! 

Mustafa Yucelgen

Hi all.

We're updating a massive content with Storyline 3 for HTML 5 and mobile capabilities. 

When we preview the content everything seems to be fine.

But when we publish the content, Turkish characters in Akzidenz font either slightly gets bold or disappear or altered by some unknown characters.

You can see the difference between published SL 2 and SL 3 HTML5 outputs in the attached file.

It works the same in Chrome, IE, Firefox or Edge.

Any suggestions?

Mustafa Yucelgen

Hi Folks!

Out content development team has found a work around about Fonts with special characters and HTML 5 Edge incompatibility ptoblems.

Here are the solutions:

1-Fonts: Change all the TT fonts creating problems in your projects with OT fonts. You'll see they are improved. If you can publish your courses with Articulate 360, it is better.

2-Incompatibility: To overcome this situation we've opened all the previous projects with Articulate 360 and published accordingly. Tried in various pcs and laptops.

Even though Microsoft Edge is not supported by HTML 5, Articulate 360 projects seem to be working fine with all the animations, interactions and statistical data feed.

Hope these help you all!

Have a great weekend.

Crystal Horn

Thanks, Mustafa, for sharing your workaround ideas for folks running into those issues with Turkish characters.

Please feel free to share this information with our support team in a case - we'll want to be sure to identify any issues that we can potentially fix on our end with fonts and language compatibility with browsers.  Thanks again!

This discussion is closed. You can start a new discussion or contact Articulate Support.