Font Spacing & Video Problems in Storyline 360

Hi, 

I've opened a Storyline 2 project and published in Storyline 360. I used the recommended HTML 5 with Flash Fallback. 

The published version is here:
http://learnitanytime.com/prodevsample/mobiletest/story.html 

When viewing the published files, there are some problems:

  • The fonts overlap each other. (screenshot attached) This happens with text added in Storyline (some of our videos have text added in Premier). The fonts do not overlap in the Storyline 360 file--only when exported.
  • On the iPhone, when a video plays, the player switches to the Quicktime player, and then switches back to the Storyline Player when a non video slide is displayed. 
  • On the iPhone, Articulate text does not show up at all when added on top of a video. This worked fine in the Articulate 2. I'm guessing the problem is related to the above issue. 

 

 

68 Replies
Ashley Terwilliger

Hi Michael,

Let's get you into a support case to work one on one with our Engineers since I was able to replicate the problem using the same set up.  You'll want to fill out the form here and upload the files previously shared, and also include a link to this discussion so that they're aware what steps we already went through. 

Alyssa Gomez

Hi there Nea! Thanks for including the font here - you made things easy for me! I downloaded the font, created a Storyline 2 file using the font, and upgraded it to Storyline 360. I didn't see any corrupted text when I upgraded, so I would be interested to take a look at your file. Would you mind sharing your Storyline 2 file here so that I can try upgrading it on my end? Just use the Add Attachment button at the bottom of the reply window.

Esco Renkola

Hi, 

It looks that storyline puts fonts info strange way to HTML5 code. Take a look at attachments.

I changed font code in Storyline HTML5 ouput to just Montserrat and it works. But still can´t get Montserrat work as it should work.

Ashley Terwilliger

Hi Nea,

Thank you so much for sending along another file and a copy of the fonts. I took a look at this as well and experienced what you described where it only seems to break within the HTML5 output within SL360. I know we've seen a few recent reports of similar font issues, and that the web servers weren't supporting the new font type of the WOFF files within HTML5 and the steps here have resolved it for a few folks on their servers.I'll still share this as an example with our team to investigate further. 

Alyssa Gomez

Hello A C! Thanks for sharing your experience and for including the link to your published file. I tested your file in Chrome, Internet Explorer, and Firefox, and I did not see the font issues you're describing. What browser were you using to test the content, and what version of Storyline did you use? You'll want to be sure it's one of the supported browsers listed here for Storyline 2 or here for Storyline 360

Would you be able to share a screenshot of what you're seeing on your end? Here's a shot I took while testing your file on my end. 

Adena Wilson

Hi. I wanted to share a follow up to my experience with the "font issue" that I have been seeing with Storyline 360. It seems to impact bold font -- so same font but not bold looks fine when we publish. Not sure if that is helpful information for anyone else but it is what we are seeing. (Published to web for HTML5, viewing on most recent version of Chrome.)

Adena Wilson

Hi Alyssa. Thank you for your follow up.

I am seeing it with a font called Gibson (and within that family, Gibson Light). Farther up in the comments on this thread I shared a file -- but I don't think we found anything in particular that we could point to as the issue. I thought we had solved it by making sure we were on the most updated browser versions, but when I converted another project (using the same font) the same issue showed up -- I was able to work around it by not using bold. I am happy to share a file here if you think that would help. 

Ashley Terwilliger

Hey Adena - I know you were also previously publishing to a network/shared drive vs. publishing locally - that could be contributing to the odd font behavior when you upgrade to Storyline 360 or go to publish. If you're seeing the same thing occur on a brand new file that you've worked on locally we'd be happy to take a look at it. If you've got the font files for Gibson that would also help - as I don't see it as a Font within Storyline on my end. 

Adena Wilson

I did switch to publishing locally and I do not believe it changed anything. However, I just spoke with our designer about the font (which is a paid font so I cannot share the files) -- he thinks it may be that I was bolding the font instead of using Gibson Bold. I will test it out by using Gibson Bold and that may solve the issue! Many thanks for sticking with me on this.

Hannah Conner

Hello,

I am wondering if a solution to this issue was ever found?  We have a ticket open to support (under another user on our team) for the exact same problem as described by Michael and have been back and forth with the engineer testing possible solutions for over a week now, with no luck. I just happened to see this post and wondered if maybe whatever solution was found could apply to our situation? Or, will there be a fix in the next update to Storyline 360? 

Hannah Moore

Ours was a server issue - we applied the following as suggested by Articulate: 

Your Web Server Isn't Configured for WOFF Files
If the box/emoji issue is affecting all learners, not just those with content blockers, it's likely the server where your courses are hosted isn't configured to properly serve WOFF files. To fix it, ask your server administrator to add these two lines of code to the .htaccess file:
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2

This resolved the issue. 

Thanks Hannah 

 

david lieberman

Ashley, 

Could you point this problem/solution out to the engineers? I've replicated it a few times with different fonts. It wasn't a problem with storyline 2. We're going through a huge amount of work to get our files ready for 360 publishing because of this problem. (it's worth it for the mobile, though)

Ashley Terwilliger

Hey David, 

I'd be happy to share it with them - I know that with Storyline 360 we implemented a lot of changes to how text was handle, so the behavior with trying to add a bold formatting vs. using the bold font set may be by design but I'll let them take a look and weigh in specifically on that. 

Ashley Terwilliger

Hi David,

What font and font sets were you using specifically? I was just discussing with one of the Storyline QA leads and we wanted to confirm that we were testing the correct set up. If it's a custom font that you were using is it something I could download for free or can you send me a font file to use for testing?