HTML5 text differences - viewed locally vs on server

Hi

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: http://www.nwyhelearning.nhs.uk/elearning/northwest/christie/moodle_embed/handveins/story_html5.html

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

Thanks,

Nicola

16 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:
http://chorn.articulatetest.com/veins_original%20-%20Storyline%20output/story_html5.html

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: http://www.nwyhelearning.nhs.uk/elearning/northwest/christie/moodle_embed/veintest/story_html5.html

 

Nicola Fern

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

https://nicolafern.github.io/veins_original/story_html5.html

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?

Nicola

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;

https://support.microsoft.com/en-us/help/3053676/windows-10-technical-preview-adds-a-feature-that-blocks-untrusted-fonts 

https://connect.microsoft.com/IE/feedback/details/2080162/ie11-css3111-font-face-encountered-unknown-error 

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.