Storyline 3 : Font Garbled on Publish

This is probably one for the bug list - but I couldn't find a better place to log that, so I'm starting here - please push me into the right spot for this kind of issue!

We opened a SL2 file in our new SL3 and published our course file with NO FLASH (yay!).  We viewed the course in Chrome and Edge, to find that the character map for the font "Gotham" in Bold was completely freaked out.  All text was nutty.  You could debug in the browser and assign any other font and the text would be fine, but switch back to Gotham Bold and the character map is all offset (like "Correct" is reliably "N]uuyni").

We worry that there will be other lurking fonts like this (so far we've found no others), so we wanted to log it with Articulate in case your architects can figure out why this happened and help with a fix.  Happy to send the file for bug fixing purposes - should I do that here?

34 Replies
Katherine Murphy

I noticed a Danielle Thomas mentioned issues with Gotham Black (we did not have issues with Gotham Black, just Gotham bold) in a different thread which doesn't seem to be about the same thing...

Alyssa Gomez

Thanks, Katherine. You mentioned that Gotham in bold displays fine in Storyline preview, but it looks incorrect after the file is published. 

How did you publish the file, and where did you host the output? Could you send me a link to the published file?

If you published for Web, the easiest way to get a link is to host the output on Tempshare. You could also publish to Articulate 360 and quickly grab a link that way.

Katherine Murphy

Total and complete radio silence from Articulate.

Non-repeatable issues are more typically about font installation.  Gotham otherwise maps correctly - when not bolded.

This is very specifically when using "Gotham" (not Gotham Black, Light, Medium, Extra Bold...etc. - just "Gotham") and selecting the little B for bolding it within Storyline.  Storyline just doesn't map Gotham - when it's bolded in this way - correctly on publish. Our high tech solution is to not bold the Gotham font. 

Leslie McKerchie

Thanks for chiming in to share an update with Kristen here Katherine. 

I apologize if it's confusing when you do not hear back from our team, but I assure you that your support case and this thread are attached to the report.

I wanted to share some information on how we define bugs and how we tackle them when they occur.

Articulate 360 eLearningMinds

I have just suffered with this issue - Garbled font. It started from SL1, and since right now browsers does not support flash anymore, thus upgrade to SL2, then from SL2 to SL3. Problem is it works fine locally - meaning calling from my notebook. but once it goes into the webserver, everything changed to garbled fonts. I have attached the video. Please look at it.

Any ideas on how to solve this?


Katherine Murphy

If you open the page in Chrome and use the Inspect menu item in the right click menu.  Find the piece of the layout that holds the incorrectly mapped font and change the name of the font to Arial or something.  If it suddenly shows up correctly, Storyline just doesn't create the font map correctly as it builds your html5.  We have only seen this with one font, thus far (as mentioned). 

Also, using inspect, you can see what the raw text looks like - if that's displaying correctly it's just the incorrect font map on build.  The only solution is for Articulate to fix it - so all you can do for now is select a different font, or possibly don't "Bold" the font (if you are bolding it), or any other additional text treatment.

Articulate 360 eLearningMinds

Katherine, hope you can elaborate on the "font" map thing with html5. As i'm not technically well verse. Fonts that are created in the course are all "Arial" and "Calibri". Some are with bold. 

If this is something Articulate should fix, any dates on the tentative solution?

Ben McKenna

Funny enough I had this issue just yesterday after editing a font to contain non-English characters using FontForge. I forgot to change the font's UniqueID in the metadata when exporting, so it was being treated by Windows as being the 'same' font, which ended up somehow corrupting the font (but only when viewed from my published Storyline file). It was listed as a separate font in every program I accessed, but it only had one entry in my Windows font directory. I guess it was being treated as part of the same font family even though they had different amount of supported characters.

I uninstalled both fonts, re-exported the new font with a UNIQUE UniqueID, then freshly re-installed both of them. After that the problem was solved.

Is it possible that the specific font you're having issues with supports different characters from the rest of its font family?

Katherine Murphy

If you are only using Arial and Calibri, it would seem you definitely have something else going on - at least from what we were experiencing. I have heard nothing from Articulate about our original problem, but we have successfully used Calibri and Arial on projects with SL3.  It seems odd that the font in the error messages are fine...  I wish I had any help, but this sounds like it is not the same as our issue?

Crystal Horn

Hi there, eLearningMinds Malaysia.  Thanks for weighing in with your experience.

Our team is still investigating this issue.  To confirm that the behavior of your fonts matches what we found with Katherine's file, would you be able to share your .story file with our team here?  If it's the same issue, we'll include you in any notifications about an update.

Another customer pointed out a possible workaround that fixed this issue for his Storyline 360 output, so I'm going to share it here in case it helps you too:

It turns out that I had both the .otf and .ttf of the fonts installed on my machine. Whenever I publish a course with both fonts installed in Storyline 360, the font does not get rendered correctly in HTML5.

I removed 1 of the fonts and it seems to have resolved my issue. All the text in my published course in Storyline 360 looks okay now.

Let me know if you submit a case, and I can follow along too.

Rob Willemse

Has there been any solution to this problem yet?  I tried al the solution offered over here but unfortunately, none of them worked for me. I tried to uninstall the fonts and Storyline, and then one by one reinstall them with restarting in between, I installed the TTF fonts instead of OTF versions. I tried the Use modern Text option but nothing helps. 

It is related to the computer because on one computer it works fine on the other (same version of Storyline, same version of the fonts, same settings for publishing).

During the preview, everything looks great however publishing garbles everything in one specific font (Dosis).

When will there be an update that will fix this issue? Or how can I solve this?

Thank you very much.

Katie Riggio

Hi there, Rob. So sorry you've come across this garbling issue, and thanks for letting us know what you’ve tried so far!

It looks like this particular bug affects the Gotham font style. I'm not able to recreate this behavior or find any similar reports with the Dosis type. Here's what I see in the published HTML5 output:dOSIS Could you tell me a bit more about how you're publishing your course – is it for Web, LMS, or something else? Additionally, could you share a sample slide from your course with me so I can give it a test in a similar environment?

We'll figure this oddity out together!

Katherine Murphy

I would bet that if you can get Dosis to work ANYWHERE, it's not a Storyline issue.  Our problem with Gotham was repeatable - everywhere - and is likely due to some incompatibility with the format of the font and a single digit adding an offset to the mapping of that font when Storyline prepares it for web delivery (="publish"). 
If you can get any OTHER computer to output your Dosis font reliably, then it certainly seems more likely that it's the setup on the computer that is making the bad file.  I'm surprised that "microsofting it" (erase all, restart, restart, restart, reinstall, restart, infinitum) didn't help.... looking forward to this getting updated!