Storyline 3 defaults to modern text rendering.....

Sep 05, 2018

Is there a way to make Storyline 3 default to standard text rendering?  On our LMS where we can only use IE 11 it doesn't matter what font you pick you get Times Roman.  I don't believe this is coming from Storyline I think it is browser security group policy that isn't allowing the fonts because you get font face errors even using Times Roman.  I think this is because of the default modern text rendering.  If you pull in a Storyline 2 course it says you can toggle between the modern and standard but if you start a new course it only allows modern.  I have tried that but you do not have the ability to select it automatically converts Storyline 2 to 3 and uses modern text rendering.

27 Replies
Alyssa Gomez

Hi Philip!

New Storyline 3 projects will automatically have Modern Text Rendering turned on, but you can easily turn it off. Just go to the Design tab on the Storyline ribbon, click the Fonts drop-down list, and de-select Use Modern Text at the bottom of the list.

You mentioned you're seeing a font that looks like Times New Roman in Internet Explorer 11. This is not due to Modern Text Rendering, but rather it's happening because...

  • The font download setting is disabled in Internet Explorer, or
  • Windows Group Policy is blocking untrusted fonts

This article explains the reasons why and solutions for each: Learners See the Wrong Fonts or Missing Letters in HTML5 Courses

Philip Edwards

I work for the USCG managing their LMS and we are trying to get the FLASH out of our courses before FLASH goes away.  The version of SL3 we just received did not have the Use Modern Text.  I downloaded a trial version of SL3 and was able to shut off Modern Text.  Being on a government standard image....we can't use another browser have to use IE11.  The group policy is on.   I created a single page using Arial which is one of our standard fonts.....I still get font face errors like:  css3111 @font-face encountered unknown error.  open-sans-regular.woff.  The text that displays is Times Roman with a lot of spacing errors.   This would make SL3 totally useless to us unless there is a work around.  For security reasons I doubt they are going to allow us to change Group Policy

Ashley Terwilliger-Pollard

Hi Philip,

With Storyline 360 (and Storyline 3) we redesigned elements such as our HTML5 publishing output, and how text is rendered to resolve some previous issues folks were seeing with font kerning. So there are a lot of things that will be different than what you saw in Storyline 2. 

I'd suggest checking in with your IT team about the group policy or allowing the font download setting to be enabled. Our team is also working on an additional fix for the issue where fonts aren't displaying correctly in browsers like IE11, but it's not yet ready. 

We'll update that article as soon as there is more to share, and I'll also tag this discussion to update here too. 

Philip Edwards

Again I work for the USCG and we have a standard image that has browser settings that we cannot change in particular, downloading fonts can be considered a possible security risk. We can also not request a different browser....IE11 is what we can use.  Similarly with the group policy I suspect there is a security risk.  We can use Storyline 2 but we purchased Storyline 3 because of it's enhanced HTML5 abilities.....now I have to explain why it won't work at all for us.

This thread: https://community.articulate.com/discussions/articulate-storyline/text-not-rendering-correctly-in-internet-explorer-11 indicates this has been a known issue for 12 months.

Just so you know government agencies cannot just buy commercial software it has to be tested and approved by our security folks which is why our original version I was testing was several upgrades behind what you have now.  It has to go thru the testing process every time you make an upgrade.

Luciana Santimaria

Hi Philip!

The only way I found was to publish as Flash with HTML5 as second option. It works fine in a LMS opened in Explorer as in Chrome. Regrettably, next year Flash will dissapear https://theblog.adobe.com/adobe-flash-update/. I hope Articulate finds a way to fix this fonts issue in Explorer, as many companies still use IE based softwares.

Regards, Luciana

Ted Coffman

Hello everyone!

We are having the same issues, mentioned above by Philip. We have an LMS, and our corporate browser is IE 11. Our IT Department disables font download by default. So, we have no way of publishing courses in HTML5, in Storyline or Rise, and not experiencing issues. Our corporate eLearning font is Arial, which is a web safe font, (https://websitesetup.org/web-safe-fonts-html-css/ ). But Storyline and Rise both embed whatever fonts you use, whether they are web safe or not. The entire issue would be resolved for us, if the Articulate developers would give you the choice of whether or not you need to embed the fonts you're using, rather than forcing font embedding on you, even when you're using web safe fonts.

Can you please ask your product engineers, developers, designers, or whoever makes that decision, to please give us the option of whether or not we need to embed fonts, and not force font embedding on us? Font embedding is unnecessary if you choose all web safe fonts.

Thank you so much!

Ted Coffman

Thank you, Ashley. I've seen that article. It just seems that if you could choose an option to use web safe fonts, it would solve all our problems, (and for some others too). 

Even when a web safe font is chosen, Storyline and Rise both, still attempt to embed it. If it's "web safe", it's not necessary to embed it. Then it wouldn't matter if users with IE 11 had their font download set to disabled. It would then work in every browser, even IE 11.

Tracy Carroll

This is a HUGE issue for me, and it's increasingly upsetting. I cannot control what browser, or what security settings, my clients' decide to use. Some very big companies are still using IE11. And I'm ending up creating awful-looking eLearning courses for some huge corporations, who hired me for my Storyline/Rise expertise. It's not easy to explain to them why I cannot produce what they want, using Articulate applications and web-safe fonts like Arial.

Alyssa Gomez

Hi Tracy,

I'm sorry this has had such a tremendous impact on your work, and I can appreciate how frustrating this has been for you. I'll definitely be sure your voice is heard, and I'll pass along your feedback to our Product team. For now, font downloads are required for viewing Storyline 3 HTML5 courses. If anything changes, we promise to keep you posted. 

Tracy Carroll

Thanks Alyssa. I use both Storyline 3, Storyline 360, and Rise with clients, and it's my understanding that font downloads are required for all of these applications. Is that correct?

If it is, I'll have to suggest that my clients who use IE11 and don't allow font downloads use some other eLearning application--and I'm not sure what application to suggest, since I work almost exclusively with Articulate products for course-building.

Ted Coffman

If you place this javascript on a trigger, to execute when the timeline starts, on the top level master pages being used in your course, it will force Arial, which is the font we use, as a web safe font. Just replace "Arial" with whatever font you choose, and it will force the browser to overwrite the font embed css being implemented in Storyline. 

function setArialFont(obj){
     $(obj).closest("div").css("font-family", "Arial");
     $("tspan").css("font-family", "Arial");
}

$(document).ready(function(){
          $("*").css("font-family", "Arial");
          $("*").hover(function(){
          setArialFont(this);
}, function(){
          setArialFont(this);
});

Ashley Terwilliger-Pollard

Hi Tracy,

I'm glad Ted's idea may help you out - and I did want to confirm that font downloads are required for Storyline 360, Rise 360, Studio 360 and Storyline 3. That is noted in our system requirements, and we have this article for some other workarounds or strategies for those organizations who can make changes.

I obviously don't use any other authoring tools or applications, but I hope folks in the community can share their e-learning expertise with you! 

Ted Coffman

I happened to notice a typo on my part, very sorry. The code above is missing the closing "});".

Try this:

function setArialFont(obj){
     $(obj).closest("div").css("font-family", "Arial");
     $("tspan").css("font-family", "Arial");
}

$(document).ready(function(){
     $("*").css("font-family", "Arial");
     $("*").hover(function(){
               setArialFont(this);
     }, function(){
               setArialFont(this);
     });

});

This discussion is closed. You can start a new discussion or contact Articulate Support.