Storyline 3 : Font Garbled on Publish

Sorry that's happening, Katherine! I took a peek into Danielle's case, and I saw that uninstalling/reinstalling the fonts solved the issue for her. Also, Sid shared a similar solution further down in that thread. 

Could you try uninstalling/reinstalling, and let me know if that does the trick?

I have tried the uninstall-reinstall and the font still is mapped incorrectly on publish,  This is repeatable on two separate systems.  When you are working with the file in Storyline, Gotham in bold displays fine.  When you publish it, the font mapping is off.

Here is a simplified repeatable example of the use of the font Gotham, with the B button clicked.  Meaning we "bold"-ed the font within Storyline, not using a separate BOLD version of the Gotham font - like Gotham Black would be.

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.

I output the file 100% html 5 to my desktop and run the story-html5.html file in various browsers.  Here is a zip of an example.

Thanks, Katherine. I'm seeing the same thing you're seeing, so I'd like to have our Support Engineers weigh in. I'm going to start a case on your behalf, so be on the lookout for an email from our team soon!

Have there been any updates on this issue? My team has experienced something similar with Gotham font in our exported Storyline 3 files, but the garbled font appears sporadically. 

Thanks in advance! 

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. 

Thanks, Katherine! 

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.

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?

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.

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?

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?

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?

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.

Turning on "Use Modern Text" under Slide Master has resolved it for me.

See attachment. 

Oh, thanks for popping in to share what worked for you Jon. It looks like some have had issues past that update to Storyline 360, but hopefully we can get to the bottom of it :)

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.

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: 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!

Looking forward to the Engineers weighing in!

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, restart...ad infinitum) didn't help.... looking forward to this getting updated!

Thanks, Katherine and we'll keep you posted! I see the issue you worked on with Renato was specific to the Gotham font, so it's possible that the Dosis font may not be the same issue. 

Hello Katie,

I will need a couple of days to prepare all the screenshots and a few
examples. Currently, we are very busy in our department. But thanks in
advance for the help!

Kindest regards,

Rob