Font Spacing & Video Problems in Storyline 360
Nov 15, 2016
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
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.
Hi,
I´m also having problem with Montserrat font. I created courses in ST 2 and now when i open them in ST 360 all the text is corrupted. Font works nicely with ST 2 and all other windows programs + HTML5. Montserrat is from Google.
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.
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.
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.
This post was removed by the author
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.
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.)
thanks. I think it was a server issue and now it has been resolved.
Hi Adena!
Can you tell me what font you were using when you saw this behavior? Are you seeing this with all fonts, or just certain fonts in particular? It might help if you could share a sample Storyline file that we can test from our end.
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.
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.
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.
Ah, that could be it Adena - if it's got the Bold font accessible to you, you'll want to use that instead of clicking on the bold button in the Storyline text formatting.
Keep us posted on if that changes the behavior at all!
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?
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
We did find a solution on our side. Our problem came from clicking the "bold" button when a font did not have a specific bold font set. We had to change the font set and everything worked fine.
Hi Hannah C,
Do you have a case number so that I can follow along?
As you'll see from a few of the answers recently here, the issue has been a bit different for a couple users although with similar symptoms.
Hannah and David, glad you figured yours out and thanks for the update!
Yes, this seemed to be our issue too!
Glad to hear that resolved your issue as well Adena!
Hi Ashley. Here's our case number: 01010351
Thanks for following up. They've escalated it to quality assurance. We've ruled out server issues, bolding issues, and all the solutions mentioned so far...
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)
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.
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?
We were using this font set specifically. The problem shows when we apply bold and view in HTML5 output.
Thanks
This discussion is closed. You can start a new discussion or contact Articulate Support.