Font Spacing & Video Problems in Storyline 360

Hi David, 

Thanks again for sharing the font files. I took a look and I wanted to confirm that I was seeing the same thing as you were describing. When I opened your font files, I found three included I found 3 types - a bold condensed, a condensed and a light. I installed the "bold condensed" and the others wouldn't install without overwriting the first one since they all have the same font names. 

When I did so - I was able to apply that font in Storyline and also apply bold formatting to it. The first image below shows the font on top standard, and bottom as bold:

The second image is within the Preview mode which is showing the HTML5 output and you'll see in that one the original text appears differently bolded, and then the one I applied bold formatting too looked correct:

Based on these two images, I'd say the bottom option looks best in bold in terms of how the bold is actually applied and then displayed as a part of the HTML5 output and without font kerning? But if you situation are you having to apply or remove the bold formatting? 

Hey Ashley,

Thanks for continuing to look into this.

I work with David and we had some additional information to share on this subject:

In Storyline, we can only select the umbrella “Berthold Akzidenz Grotesk BE” as a font, not any of the three individual fonts in the set. It looks like you noticed this as well.

For us, the font Storyline lists as "Berthold Akzidenz Grotesk BE" is actually "Berthold Akzidenz Grotesk BE Condensed." When it's made bold, it should change to "Berthold Akzidenz Grotesk BE Bold Condensed." Instead, the font becomes corrupted while previewing or after publishing in Storyline 360/HTML5.

It looks like you installed the bold font in the set ("Berthold Akzidenz Grotesk BE Bold Condensed"). If you could make sure the font installed is "Berthold Akzidenz Grotesk BE Condensed," it'll better match how we currently use the font set.

Let me know if you have any questions about that or anything else.

Thanks!

Hi. I've been following this thread since we've had the same issue with font distortion in HTML5 -- wit the bold font causing the problem. Also had the issue of not being able to install the full font family. One thing that I have tried is installing the fonts one at a time (we are using a different font but I think the issue is the same). So I installed the regular version, made sure it was there, the light version (checked it), then the bold version and checked that. So far that has worked, but granted it is not ideal. Side note, we always checked to see if the fonts loaded in Word as well and the same thing was happening and it seems like the two are related? I hope this helps some.

Thanks Michael for sharing which one you used specifically - I went ahead and followed those steps and kept the same language and font set up in terms of the non-bold formatting on top and the bottom bold formatting applied on the bottom text using just the Condensed option. You'll see I published a copy of it to Articulate Review here. That one shows the same - where applying the bold formatting to the bottom text looks better than the text standalone - although I don't see either of them showing as corrupted? (Not a term I use loosely either...corrupted to me would be not working at all, odd characters/symbols inserted, aka complete mayhem!)

Here again is an image of how those look on stage - so the published output is almost the reverse of what I'm seeing here - which I can certainly report to our QA team to investigate further - before I do, can you double check that this is what you're seeing and experiencing as corrupted? 

No problem!

The font issues vary on our end. Here are the three different versions that we've found:

• Sometimes it looks like what you demonstrated above, where the non-bold and bold fonts both look bold. There are slight differences, such as kerning or thickness, but they're both definitely attempting to be "bold."
• Sometimes it's the opposite, where the non-bold and bold fonts both look non-bold. Again, there are slight differences, but overall, it's clear that neither line of text is "bold."
• Sometimes it looks like the screenshot below, where a bolded font becomes a mix of bold and non-bold. This is what I meant by corrupted and what appears throughout a majority of the Storyline 2 courses we've been upgrading to Storyline 360.

In general, the problem is consistent, but how the problem appears is inconsistent.

Hi Adena,

Hi Ashley and others,

I did not intend to confuse things -- I was just updating our experience with the font issue. Where it stands now for us, I do not see a need to submit a support case. However, I will try to better explain my experience in the hopes that it may help out someone else. I sure do appreciate this thread but definitely did not want to bog it down. Below is what we experienced and how we are handling it.

When we upgraded a course to Storyline 360, and then published for HTML5 only, the result was corrupted font -- so it was unreadable. There were missing letters, letters running into each other, and characters that did not look like letters. As we attempted to troubleshoot, it became clear that it was only happening on bolded font - that is using the bold feature in Storyline (so the font name is Gibson, and we used Gibson then bolded it. Not to be confused with using Gibson Bold). After speaking with our designer, he suspected that by not using the Gibson Bold font, we were causing a problem. What we then found was that we could not install the full Gibson family of fonts. Each time we tried, only 4 fonts installed (so Gibson, GibsonLight, etc...). Eventually, I ended up installing each font type separately (as opposed to as a family).  So far that has worked: a) I could install the fonts I needed and b) when published in HTML5 only, everything looked as it should. I am staying away from using the bold feature. 

No reply needed from staff (but if someone has a question I would be happy to address it). 

Hi Adena,

My apologies! I didn't mean to imply that you were doing anything wrong or that it wouldn't be appropriate to share, but just that I wanted to ensure we were able to focus on your specific issue and that it didn't get lost here. These font issues have been something ongoing for some time in Storyline as you'll see here in ELH - and one of the reasons is that it got a little murky and confusing with varying reports here and different issues. Missing letters and characters that don't look like letters sounds different than the most recent issue with Daniel here - as yours is also seemingly fixed by installing all the fonts separately? 

If you need anything else please feel free to let us know - either here in the forums or in a Support case. 

Thanks Michael for that image - that's more in line with the font kerning we've seen in the past, but not something I saw on the examples I was working in. I do wonder if although Adena mentioned missing letters and odd characters - if it's similar at least in terms of ensuring you install each font type as it's own font vs. an entire font family? 

I'll report the issue to our team with how the bold formatting is impacting the fonts as a whole from stage to preview/publish - so I can keep you posted on that item here in the forums! 

Adena - just a heads up:  I've had the same problem with a font called Kalam, and it happens with both bold and plain versions of text in my course.  I have created a support case, so I'm keeping my fingers crossed.

Hello Diana - Thanks for popping in to share. Would you be able to share your case number so that I could follow along?

Great. Thanks for letting me know Diana, and I will look forward to hearing what results. 

Cheers.

Hi Leslie - finally got my info to go thru - case number 01019990.  Thx!!!

Ah, so I wasn't overlooking it. Thanks Diana :)

Thanks again Diana - looks like Cleo is taking a look and doing some testing. I'll continue to follow along.

Hello Diana - I took a look at your case this morning and it looks like a couple of issues have been shared/reported and he is continuing to work with you on another. Seems like you are in good hands :)

Hey all,

Great news - Articulate 360 Update 5 is now available! It includes a number of fixes detailed in the release notes here.  

The item you may be interested in is how it fixed an issue where fonts such as Poppin and Kalam were not displaying properly. We're still working on some other fonts and we'll keep you posted!

Launch the Articulate 360 desktop app on your computer and click the “Update” button next to each tool.

Let us know if you have any questions!

Hi Nea,

Just a quick update here as I talked with our QA team earlier. 

They were not able to reproduce the issue with the Montserrant font, but they did share that font should be installed with Storyline automatically. So they walked me through uninstalling it and that fixed it on my end too.

Can you try these steps:

1. Uninstalling the Montserrant font (I searched in the Control panel of Windows for "Uninstall fonts" to find the list of them all and then chose that font's Delete button)

2. Uninstall Storyline 360 - Open the desktop tray application where you can see all the Articulate 360 products. Use the small arrow next to the Open button and you'll see "Uninstall"

3. Re-install Storyline 360 - Click the button that now says Install

Now try inserting a new block of text with the Montserrant font. You can Preview it as that'll show the HTML5 output and it should all work normally again.

Let me know how you do with those steps!