Storyline 2 - character spacing problem

I did see the spacing issue was fixed in SL 360, but that does not work for me because my organization ran into an even bigger problem in 360. Courses that we developed using 'Arial' font  automatically change to 'Times New Roman' font when playing the course in IE. This is an issue because our branding standards require we use Arial font. So I'm stuck --- I can use SL2 and have spacing issues, or use 360 and have the font change entirely. Neither option is acceptable, so I hope Articulate is on this. 

Hi Cassandra,

I know you and went back and forth about a text issue here, with how it's displaying in IE11, but that's not the same as Arial moving to TNR. Do you have a case or a forum link so that I can follow up on the correct issue for you? 

The spacing fix isn't something that we'll be able to revert to Storyline 2, but I know our team is working on a few of these font issues in Storyline 360. 

Hi Ashley,

Thanks for the follow-up. I am part of this thread regarding text not rendering properly in IE 11:
https://community.articulate.com/discussions/articulate-storyline/text-not-rendering-correctly-in-internet-explorer-11

Again, I am stuck. My project was originally in 360, but the text wouldn’t render properly. I had no choice but to redo my project in SL2, but now I’m experiencing the spacing issues. My organization must use Arial font for branding purposes, and our supported browser is IE. I prefer to use 360, but I can’t until the text renders correctly. Help!

Thanks,

Cassandra

Thanks, Cassandra. 

That issue is specific to IE11 and there are a few ways to fix it as outlined here. Our team is also looking into what other changes we can make on our end to override any specific IE11 settings, but that's a fix that is a bit farther out in terms of implementation. Were you able to test any of those fixes mentioned on your content and in IE11? 

Hi Ashley,

These workarounds were suggested to me before, and unfortunately they will not work for my organization. We develop some training for outside customers, and we find it unacceptable t ask  them to get their IT department involved over a font issue. We cannot ask for a different browser to be used, because IE is the supported browser. Lastly, we cannot do the Flash output - some of our customers do not use Flash whatsoever. I am stuck! Please help!

Cassandra - Do you see this issue only in IE, or is it across all browsers? Does the font change to Times New Roman when you open a file up in Storyline, or does it show as Arial in the software, but doesn't display correctly in a browser?

I'm wondering something -- because I've never seen the issue where the font is "changed" by the client with a version change. I'm going to assume, if the issue is specifically with IE, then there could be something with the CSS where IE isn't recognizing / associating the font with the system-loaded Arial, so it could be going back to whatever is set at its base font in settings. 

I've also seen cases (not with Arial, but with other fonts) where a developer will have one version of a font installed, and a user will have another one (they may be named the same in a font drop down, but are named differently when the CSS is generated, for example). They look darn close, but aren't called the same in the CSS - the system doesn't know which font to display, so it goes back to browser default.

There are some layers of troubleshooting to go through to see what the problem is...although the fact that this is happening with Arial is perplexing to me. 

First see if it's across different browsers on a number of devices (if it fails on the developer device, too, then that's actually a bonus because you can test). Does it happen it's loaded to a web server AND you link directly to story_html5.html? If you go to F12 (developer tools) in IE, is the emulation in IE 11 / Edge mode, or might the server be forcing an older emulation mode (and indeed fairly recently, I've seen a server force down to IE6...yikes!!)?

If it does work on a developer device and not another device - then it's a matter of comparison to see what the differences are. It could be browser settings, it could be the font itself (although unlikely). It might also be some sort of permissions (although unlikely - but I've seen cases in whitelist sites where links out to jquery are not allowed which can cause all sorts of freaky things to happen). 

I wish I had a clean answer for you - but I sort of think if this were an issue with the software for everyone, there would be a gajillion folks taking the servers down with all their posts. There might just be something just "right" (or wrong in this case) with your development and delivery environments that could also be not playing friendly in just the "wrong" way causing this. 

What types of troubleshooting have you done so far? Knowing everything you've investigated might also help us guide you.

Best of luck,
Lisa

Hi Cass, 

I wanted to bring them up again just in case, as that discussion has gotten a bit long and I worry that items get lost. :) 

As for the fix, it's still something our team is working on, and it's not a minor fix. You can see that Mike shared an update on this a little less than a month ago: 

Hi all,

The way we currently handle Storyline HTML5 fonts with ligatures makes it so the font quality matches in Storyline and in the published output. While this works well for the majority of use cases, we know that it causes problems in Internet Explorer when a security setting is enabled that prohibits web fonts from being downloaded. We hear you that this is painful. And we’ve come up with a solution to address it. It’s not going to be an easy fix, so we can’t give an ETA just yet, but it is definitely at the top of the priority list.

As soon as it's ready, we'll let everyone know and I'm sorry it's causing such difficulty on your end. 

Hi Ashley, I'm not clear on what Mike's suggested workaround is, I cannot locate his instructions in that other thread. 

Hi Megan,

Sorry that you ran into an issue with character spacing as well.

Mike is referring to a fix that they are working on for Storyline 360, but it has not been completed yet. What version of Storyline are you currently using?

And we’ve come up with a solution to address it. It’s not going to be an easy fix, so we can’t give an ETA just yet, but it is definitely at the top of the priority list.

This particular project is SL 360 published for HTML5. The font is Arial
and the issue is with using capital A. All the instances client pointed out
looked like there was no space between A and the next word. Since I typed
my question here, I decided to try double spaces and that was enough for
client to sign off on the final publish. Thanks for following up!

I am having the same issue with SL360. Not only is there a character spacing issue, but my font is also changed from 'Arial' to 'Times New Roman'. This issue is only occurring in IE (my organizations' preferred browser), so I tried your suggested workaround to 'enable font downloading' and it's still not working.

Is there an ETA on this fix yet?

Cassandra S. Miller
Instructional Designer and Developer
Transition Services
[Software

Hi Megan,

Did you also try enabling modern text? Earlier versions of Storyline had issues with the font kerning (essentially the spaces between text) based on how we draw the text for various outputs (HTML5 and Flash) so our team rewrote that to account for these discrepancies between browsers and outputs. 

Hi Ashley,

I just tried enabling modern text in SL360, and I had the same issues with IE. I had weird spacing issues, and my Arial font was changed to ‘Times New Roman’.

Any other ideas?

Thanks!

Cassandra

Hi Megan,

Glad you were able to find a solution in the meantime that would work. If you'd like us to take a look at your .story file, please feel free to share.

Hi Cassandra,

Do you have a .story file that we can take a look at as well?

Hi Lisa,

Thanks for the reply - sorry I didn't notice this sooner.

This issue is only occurring in IE (we've tried Chrome and FireFox with no issues). It is occurring with my device (I am the developer) and it is occurring for everyone who uses IE (IE is unfortunately the supported browser in our organization). We have tried to following:

1.) Had IT whitelist our LMS site.

2.) Added our LMS site to 'trusted websites'

3.) IT enabled font downloading in IE

4.) Tried Modern Text

This issue is preventing my organization from releasing training, so we are wracking our brains trying to find a solution, or at least a temporary workaround,

Any advice is greatly appreciated.

Hi Cassandra!

It sounds like you've already been through quite a bit of troubleshooting, to no avail! I know this has halted your training release, so we can try and help you get moving again as soon as possible.

I've opened a support case on your behalf--keep an eye out for an email from our support engineers soon!

Thank you so much I really appreciate that! I'll keep my eyes peeled.

Sent from VMware Boxer

I am still experiencing this issue with Storyline 3 (Update 4: Build 3.4.15731.0), using the Arial font. Is anyone else still experiencing it? And if so, is there either a fix or a font that you suggest that it is less noticeable with? 

thank you-

Miriam

Hi Miriam,

I am also still experiencing this in my organization.

I have been troubleshooting this issue for what feels like an eternity. From my research, I am beginning to believe the issue is within my organization's network and not within Storyline. We believe the issue is due to our network blocking font downloads.

We are in the early stages of exploring this with our IT department, but I'll update this discussion with any pertinent info I discover.

Good luck to you - I know this is an incredibly frustrating issue.

Cassandra S. Miller
Instructional Designer and Developer
Transition Services
[Software

Thanks Cassandra for keeping us updated, and if there is anything else we can do to help with your investigations just let us know.

Miriam, for your Storyline 3 Update 4 set up - did you notice a difference at all while using Modern text vs. Classic? 

Hi Ashley - yes, the Modern text made a difference, although I had created the project after the update and my understanding was that Modern text would be applied automatically. I went ahead and tried applying it when I read about the difference it should make, since it didn't appear to be checked or anything in the tool bar. It made a difference. So either I was wrong in thinking I had read that it would be applied automatically if you had installed the update, or, if that statement actually IS in your literature somewhere, you may want to have people check first to see if it has been applied.
Thank you -
Miriam

Hi Miriam,

I'll check with our team on the documentation, but everywhere should indicate that existing projects will continue to use classic text by default, but you can switch to modern text. With new projects those automatically use modern text, so you don’t have to do any extra work.

It sounds like this was a file you created after Modern text rolled out though? Let me know if you spot that again. Maybe are you creating a new file from a template or something similar? 

Glad you're back up and running though! 

Hello!

I have the same problem with Ubuntu font. Have you any idea how to solve it?

Hi Justyna,

Are you also using Storyline 2? Based on a lot of the feedback and details shared here, our team implemented a new modern text after the release of Storyline 3 and Storyline 360 that has resolved the majority of character spacing/font kerning issues.

You can read a bit more about that here in Storyline 3, and if you're looking to upgrade you could also go through a trial of Storyline 3 (or a trial of Articulate 360 here). 

Let me know if you have any other questions!