Fonts not displaying properly in Chrome

Nov 07, 2016

Hi there, 

I've been using Articulate Storyline for a number of years and I've never come across this issue before - basically once my .story files have been published and uploaded, half of my capital E's are missing! I've attached a photo. It only seems to happen when viewing the module in Chrome - IE works, as does Firefox. I'm hesitant to change the font, as I'm not sure that will solve the issue and will just create more work for me.

 

Any help would be greatly appreciated!

22 Replies
Ali Goulet

Hi Wendy,

Thanks so much for reaching out here and sharing that screenshot! That does sound like an odd issue, however I'm not sure I'm seeing exactly what you're describing. In that screenshot, all the capital "E's" seem to be present. I did notice some strange spacing after the "E" in your title on the slide itself, however. Is that what you're referring to? 

If so, this may be related to a known issue regarding text kerning (inconsistencies in spacing between letters) which is something our Quality Assurance team is aware of and investigating. This can vary between HTML5 and flash outputs, so if you're viewing the HTML5 output in Chrome in the Flash output in IE and Firefox, that could explain why you're noticing it more in Chrome.

Justin compiled a few examples other users have reported of this in his post over here which you may want to take a peek at to see if it's similar to what you're experiencing. Some fonts, such as Century Gothic, do seem to be more problematic in this area than others. As Justin mentioned, there wasn't a fix for it released in the latest update and it's something our QA team continues to investigate. However, there have been gradual improvements made in earlier updates as Ashley described here. If you're currently running an older version, I would recommend updating to the latest version and republishing to see if it makes any noticeable difference. 

Otherwise, I apologize if I've overlooked something in your screenshot so please let me know if so! It might also be helpful if I could take a look at your .story project file and do some testing. Would you mind sharing it here? You can add it as an attachment right to a comment in this thread. Thanks! :) 

Luis Rivera

Hi,

I have uploaded a course with Calibri font to our company's LMS and the font won't display in Google Chrome. It's not an HTML5 file. It was a .zip and was uploaded as a stand-alone course. The font being displayed is a serif font that I don't want to use and the letter "t" appears as a hollow box. Any solutions to this problem? Thanks.

Ali Goulet

Hi Luis! So sorry this is occurring for you and thanks for reaching out here to report this behavior. Would you be able to share a copy of your .story project file here so we can do a little testing? You can add it as an attachment right to a comment in this thread, or if you'd prefer to share it privately rather than publicly, you can do so with our Support Engineers by way of this form. Thanks again!

Alyssa Gomez

Hi there Anne!

Really strange that this problem is happening in only one particular file, and only in Chrome. What version of Storyline are you using?

Would you mind sharing your project file with our team so we can take a closer look? It would be helpful to also see a screenshot of the incorrect font you're seeing. 

You can attach those two items to this form, and we'll reach out to you as soon as we've tested your file. Thanks!

Jennifer Gildea

I uploaded a course (Storyline 360) to our SuccessFactors LMS yesterday, did some testing, and it looked great!  I've republished the course a few times, testing with various screen dimensions to find out what is best for our laptop viewers as well as those who view on external monitors. 

This morning, we experienced the new Chrome Update, and now the courses aren't playing well in chrome. For me, it was the Articulate font (I figured that one was safe!) that is now not displaying in the published course in one version (it's displaying a Serif font - or whatever I set as a default in Chrome), but is displaying fine in the other version. For another user, it was graphics missing and odd font issues that I've seen described here. (I've asked her to clear cache and try again, so we'll see what happens there). 

The same course plays beautifully in Firefox AND IE. No font swaps at all. 

It's great for me to be able to change my font in Chrome, but I can't tell all my users to do that. 

Any recommendations, or at least, suggestion for a "least objectionable" sans serif font that is likely to play well on ALL devices?

Chrome is a favorite with a lot of our employees, and we'd hate to have to tell them to switch.

Ashley Terwilliger-Pollard

Hi Jennifer,

I'm sorry you've run into such trouble with the Chrome update. Do you know what update you are on, and what update you were on previously?

Also, what build of Storyline 360 are you publishing with? Storyline 360's latest is build 3.20.16814.0. If you are able to update with that version, I'd look into any differences if you enable modern text. 

If all learners see the wrong fonts in all browsers (Chrome, Firefox, Internet Explorer, etc.), it probably means the server where your content is hosted doesn’t know how to display web fonts.

The good news is it’s easy to fix. Ask your server administrator to add a MIME type to the hosting server for Web Open Font Format (WOFF) files. For example, here’s how to add a MIME type in IIS Manager.

Let us know how it goes after checking into those areas! We're here to help. 

Noelle T

This sounds like the same, or similar problem I reported on another thread. I got a substitution font and graphics and text got scattered across the screen when viewing in Chrome only. This happened after publishing with the latest update of Storyline 360 and an update to Chrome. The hardest thing is that it's not consistent . And I can make the problem go away by clearing the cache.

I'd like to follow along too to see if any fixes come out of this discussion.

Ashley Terwilliger-Pollard

Thanks, Noelle and I saw that Leslie shared a link in that discussion to have you reach out to our Support Team. I don't see a case that you started yet, but if you need us to take a look at your files we're still here. 

That'll help us test and narrow down the issue further to figure out if we need to fix something in Storyline! 

Leslie McKerchie

Hi Adam,

If you are seeing the wrong fonts when viewing your course in Review 360 using the latest Google Chrome version, I'd double check that a plugin to block fonts has not been added to the browser.

Here are some additional details.

If you need us to take a look, then with your permission, share your project file so we can investigate what's happening. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.

Adam Bayliss

Hi Leslie, thanks for looking - I've made a little film where you can see the problem - First, in Chrome, I resize the window and the heading disappears, then goes off the screen etc. Then I opened a layer with some text in Courier - the textbox is the wrong size and the font don't fit. Resizing it doesnt resize the font. Finally I do the same in MS Edge, so we can see what is supposed to happen. 

I'm not sure that there is a quick solution - we can tell our users to use Edge for now - I guess I wont be the only one with this issue though

All the best, cheers,

Adam

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