HTML5 text differences - viewed locally vs on server

Nov 10, 2016


I'm testing the new SL 360 and I've worked on a drag and drop interaction I completed in SL2 yesterday.

Testing the HTML5 output, the font on the player and the on-screen text changes to what looks like Times New Roman from Arial when viewed on our server. It appears fine when viewed in the browser from my hard drive. Any solutions anyone knows of?

Screen grabs attached! The live version can be seen at:

The text that appears correctly is actually in the arm image so isn't being rendered.



18 Replies
Crystal Horn

Hello again!  I did some testing with both yours and my files.  I opened your file in Storyline 360 and republished it with HTML5/Flash fallback.  I then uploaded it to my test site, and I did not notice a difference in text.  The Arial seemed to have rendered properly:

I'm attaching my published version of your file below.

When I tested with my own file, creating a drag and drop with the same settings as yours in Storyline 2, I published the Storyline 2 version and viewed the HTML5 output.  It looked fine, so I imported that course into a new Storyline 360 course and published it for HTML5/Flash fallback.  Upon viewing the HTML5 output, it still looked fine.  My Arial font remained.

I'm not sure what could be different about your output.  What browser are you using to view your course?  For Storyline 360, HTML5 is supported on the following browsers:

Windows: Internet Explorer 10 or later, Microsoft Edge (latest version), Google Chrome (latest version), Firefox (latest version)

Mac: Safari (latest version), Google Chrome (latest version), Firefox (latest version)

Mobile: Safari in Apple iOS 8 or later, Google Chrome in Apple iOS 8 or later, Google Chrome in Android OS 4.1 or later

Let me know what you think!

Nicola Fern

I really don't know then! I viewed yours and it looks fine. I was using latest Chrome on Windows 7 to view things at work, and I'm now trying on my Macbook Air with Chrome and Safari and I'm seeing the same thing - mine looks weird in both browsers and yours looks OK. 

I'll have a look when I get back to work again tomorrow!

Thanks for your help :)

Nancy Woinoski

I know that the html5 version displays a temporary font while it loads the fonts you use in your course. I have noticed in my projects that the temporary font shows briefly on the first slide and then changes to the font I am actually using.

In your project it looks like your font never loads so SL sticks with the default. Not sure why though. I have used arial in my project and the displays ok.


Nicola Fern

I am so confused.

I uploaded your files in that zip and it is still happening - so yours appear with the funky text. I'm testing with the same browsers at work today.

I've also tried importing the slide into a new document and reuploading, and still get the same issue. The Flash content appears as it should.

And I've rebooted my computer to get rid of any weird gremlins.

Your files are uploaded here:


Nicola Fern

I think it's the server! No idea why - I uploaded it to github and it works:

Have you any idea what could be causing it? I don' t have any control over the server. I've got HTML 5 content that I've handcoded and that uses google web fonts/css with no issues.

Christin Lundberg

Hi, Nicole - I know this is kind of an old post, but I'm wondering if this solved your problem. I'm experiencing the same issue with Avenir font on Windows 10 machines using Internet Explorer 11 at my company. I'm completely stumped at this point and am hoping this will work for us. What's weird is that it seems to work perfectly fine on Windows 7 machines. I published with HTML5/Flash. I should also note that I've installed the April 18, 2017 Articulate 360 updates and republished my courses. The issue still persists on Windows 10 machines.

Nicola Fern

Hi Christin :)

No worries...yes, it was the server mime types that were the problem. As soon as woff was added it worked and since then I've had no further issues. 

I'm not sure why you'd have a problem with just Windows 10...I use Windows 7 at work and MacOS at home. Maybe someone else will have some insight. 

Have you got a link we can test?


Christin Lundberg

Hi, Nicola - 

Thanks for your response. It took a lot of researching on our end, but we think we figured it out. It seems our IT department had to adjust a setting that was blocking untrusted fonts. This was occurring only on Windows 10 machines that were running Internet Explorer 11 (running in enterprise mode). The team is currently addressing the issue machine-by-machine, but the fix is working, so that's good news. Their next step will be to get the fix deployed to the entire organization. Here's some additional info in case this can help others; 

I should note that this was not a Storyline 360-only issue. Even our company website was displaying font strangely. It just happened that it was first detected when someone tried viewing a Storyline 360 course.

Vernon Hampton

Good Afternoon,

I'm not sure if there are more recent forum posts regarding this issue but I have run into this problem as well.  I published web content to place on a testing server and once I access the training material it displays the font in TNR instead of the expected font I see in review or storyline.  I believe one of the known solutions was to check Internet Information Services.  I checked IIS on the test box and I can see that the font I am looking for has been allowed (the extension .woff).  I did try and modify the stylesheet in my content.  While I was able to fix some of the font issues, I have inner slide content in my training material that was unchanged and I'm not sure how to fix that.  Can anyone point in the direction of the latest solutions to these issues?