Font displaying incorrectly
Mar 14, 2017
I have been using Storyline 2 up to this date and our company is starting to transfer to 360 because of the review feature. I have upgraded a previous project to test 360 and have encountered a font issue.
The displays correctly in storyline 360 but upon previewing and publishing the font dramatically changes. You can see this in the screen shots provided, which is in a storyline that has been created from scratch. I have uninstalled the fonts and reinstalled them again and it doesn't seem to fix anything.
Any solutions?
70 Replies
My issue is in Chrome, not IE. The font is not displaying the proper font, and won't show F. This has not always happened, only just recently.
Well that's not pretty Melissa. I see you're testing in SCORM Cloud as well, so we'd want to take a look at your file. You are welcome to share it here via the 'Add Attachment' option below the reply window or here if you need to share privately.
Leslie,
Please see my post here: https://community.articulate.com/discussions/articulate-storyline/html5-storyline-360-publish-multiple-issues
Thanks Melissa for linking me to your post. I just responded here.
I have battled with this problem as well, and I've worked out a solution that allows an unsupported font to correctly appear in the HTML5 published file.
After you publish your presentation, navigate through the file folders: Storyline output > html5 > data > css. You'll find a file there called output.min. I recommend making a backup (i.e., copy, paste, and rename as "output-backup.min"), but that's optional.
The attached image describes the next steps. Open the output.min file with Notepad. Search the file for mentions of your font. In the coding next to the font name is the source location ("src: url"), which may have the value 'null' listed (this was the culprit in my font not appearing correctly). Replace that with your font file's name (filename and extension). Continue searching for the font and repeat the process; it may show up in more than one location. Save your changes to the output.min file.
The last thing you need to do is place a copy of the actual font file in the css folder. From there, you're all set; just zip up the modified publish, and it should show up just as you see it in Storyline.
The only catch is that this solution won't work if you're directly uploading to Articulate 360 for collaborative reviews; you don't have any advance opportunities to tweak the CSS file before the upload. Hope this helps!
How about this then....
An example of poor font rendering in ST360 - see screenshot.
It shows the same font, same weight, size etc but one example is blurry and one is crisp!!
Hi Paul,
Thanks for sharing that image. What's the difference in those two fonts? Is the top one actually on an image, and inserted that way into Studio?
If you're able to share that Presenter package with our team or upload it here in ELH it may be easier to take a look and test around what you're seeing.
Hey Paul,
Would you be able to share that .story slide with us so that we can take a look as well?
HI Ashley - no difference between these two instances, that's the point. Both are text boxes with exactly the same font, weight and spacing but both render differently. I'll cut out and share this page as an st360 file for you all.
Hi both, saved out a single slide and tested again this morning but could not recreate error. Good news in one sense, but I'll keep an eye out and send another example if it happens again. Thanks for quick response.
Sounds great Paul. Glad it's working and you know where to find us :)
Hi all, I'm having a similar issue to some in this chain. I have the most up-to date Storyline 3 updates. I am using an OTC font and it looks great in the working file, but when I preview, it all turns to gibberish. This is before publishing or loading in LMS. Any possible solutions? - Thanks!
Hi Jesse,
Yikes, that definitely doesn't look right! Have you tried enabling or disabling Modern Text?
Just open your project, go to the Design tab on the Storyline ribbon, click the Fonts drop-down list, and select or de-select Use Modern Text at the bottom of the list.
Let me know if that makes a difference!
Hi Alyssa,
That did the trick! Thanks so much!
That's great, Jesse! Every time we hear of customers encountering this issue, we want to make note of it. Were you able to resolve the problem by enabling or disabling Modern Text?
Enabling. The font visibly adjusted to look slightly more bold and, when previewed, looked correct.
Perfect, thanks for letting me know!
Storyline 360 (Build 3.18.16333.0) using Classic Player
Browsers: Chrome and Firefox
We started off using Arial, preview displays a serif font. Switched to Open Sans, preview still displays a serif font. Set the default font in player Open Sans, set the theme font to Open Sans, changed font on the Master slide to Open Sans, changed any text on the screens with non-Open Sans font to Open Sans font, yet, some of the text still displays as serif fonts, similar to the screenshots provided by By Tom Gillespie (over a year ago).
When using the Modern player, fonts displays correctly.
Something told me to check the “Use Modern Text” option at the end of the Theme > Fonts list. Once I removed the checkmark from “Use Modern Text”, the fonts displayed properly when using Classic player.
Thanks, Emerson.
We've had a few folks who ran into similar, and at times you could toggle the option for modern text off and back on if you needed to use it. Let me know if that works, or if you're stuck not using the Modern text option.
Hello! Our entire development teams in 3 different departments are experiencing this issue when our users are viewing the content in our LMS via Internet Explorer. We do recommend to our learners that they should use Chrome for the most consistent experience, however, this is clearly an Articulate bug. The font we are trying to get to display correctly is...ARIAL. Yup, a very simple font. It's turning it into a serif font.
Do we have an ETA on when a bug fix will be deployed?
Hi Angie,
Our team is still working on a fix for this issue where the fonts aren't displaying correctly, and while they finalize that you may also want to look at the workarounds and options detailed here.
We'll let folks know as soon as that fix is ready too, as there is not an ETA to share yet.
Can I ask if there has been any update regarding this issue for Storyline 3?
I currently have a client experiencing an issue where the course Arial font is being replaced by something that resembles Times New Roman. If this hasn't been resolved then do we know what is generating this replacement font? It seems like everyone has the same Times New Roman type font as a replacement.
Thanks
Hello Rob. Currently, if learners are seeing the wrong font in your courses, these are the steps that will help. We are working on a fix for the publishing process to improve font rendering in the output, but we haven't finalized it at this point. The fix will be released for Storyline 360 first, and then in the following Storyline 3 update.
I'm sorry I can't be more specific, but we'll definitely keep you posted with new information!
Hi all - any updates on a bug fix?
We're in a large corporate setting using Cornerstone on Demand so we're unable to make any changes to the server side and we can't access our learner's computers.
Needless to say that leaves us in a pickle!
This discussion is closed. You can start a new discussion or contact Articulate Support.