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
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! :)
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.
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!
The file is 126MB and therefore won't let me upload.
Hey Luis -- Thanks for letting me know! Would you be able to share a portion of it then? You could import a few of the slides into a new project and share that either here or with our Support Engineers, that way our team will still be able to do some investigating into what you're describing specifically. Keep me posted! :)
I feel like it may be a setting in our LMS because I uploaded a scene of it
to SCORM Cloud and it works fine. I will keep you posted if I need further
assistance outside of our LMS provider. Thanks for being so responsive.
Ah! Yes, that very well could be the case if everything looked good in SCORM Cloud. What LMS are you using? If you're reaching out to them directly, feel free to also keep us updated in the thread here on their findings! I could see that potentially being useful information for other users with the same LMS.
We're using infor. I'm not too fond of it but that's what they bought. I
will let you know what our findings are once we get it situated. Thanks
again Ali.
I have the same problem in Chrome with one specific project. That project is ok in review, IE, Firefox. And it isn't just the LMS or Chrome, as other storyline projects are doing just fine in Chrome in the LMS. The LMS is D2l. Curious about what you learned?
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!
. I use v 3.10.13923. This does not happen with other projects. In fact, this project used to NOT do this. I'll upload the zipped file and a screen shot now.
Thanks, Anne!
Could you share your case number with me so I can follow along?
Also, it looks like you're using an older update of Storyline 360. We've added quite a few new features and bug fixes, so I would recommend upgrading to the latest version here!
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.
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.
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.
Hi Noelle,
We haven't heard back from Jennifer yet, but replying will notify you of any further conversation here.
What thread are you referring to where you had a similar issue? Just wanted to take a peek :)
Hi Leslie,
I explain it on this thread here. we have had it happen three times so far with 2 different users. each time we can make it go away by clearing the cache.
https://community.articulate.com/discussions/articulate-storyline/storyline-360-html5-only-images-and-text-moving-around-on-the-page
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!
We are getting this problem with chrome on the review site - any updates?
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.
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
Thanks, Adam.
Thanks for sharing the video so that we can understand what you are experiencing when viewing the course with your Chrome browser in Review 360.
I've not seen similar reports of this, so I've opened a support case on your behalf so that we can take a closer look and do some additional testing.
This discussion is closed. You can start a new discussion or contact Articulate Support.