Forum Discussion
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
I think I've got to the bottom of it. My server is refusing access to the .woff files that contain your fonts.
I've logged a call with our helpdesk and hopefully they can alter it to allow that mime type.
Thanks for your help and suggestions!
Yes, thank you for sharing what was happening here. That could be useful info for anyone struggling in the same way!
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.
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
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.
Hi Nicola- I see what you're saying. So you initially built this drag and drop in Storyline 2 and then upgraded the file to Storyline 360?
Are you able to share your .story file(s) for us to do some testing? I'll see if I can reproduce in a new project. Thanks for reaching out!
Yes, Crystal - see attached.
Thanks for any insight you can help with!
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.htmlI'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!
Did you try publishing using html5 only option?
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 :)
Sounds good, Nicola. Maybe for tomorrow: be sure that you are publishing to your local C: drive and not to a network or shared drive. We've seen weird behavior when not working on the local drive, so I figured I'd throw that out there. Have a good night!
Yeah I only ever publish to a local drive. I've seen that weird behaviour
too!
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.
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
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.
Thank you for your persistence in getting to the bottom of it and for sharing your findings with the community.
