Variables changing the font

Jun 30, 2014

Hi,

I am using variables in Storyline, particularly the participants name throughout the course. Anywhere that I use this variable, the font changes in type and size. On one computer it changes from a sans-serif to a serif font. 

Any ideas?

Regards,

Matthew

35 Replies
Ashley Terwilliger-Pollard

Hi Matthew,

Blake is correct - that since the variable entry font needs to rely on the web based font or fonts installed on the users system it may change when they're viewing the published output. If you're referencing the variable though, that font should remain consistent throughout unless you're viewing the HTML5 or Mobile player output as detailed here. 

Elizabeth Klein

Thanks Mathew for asking the question, that's exactly what I came here to find! Thanks Blake and Ashley for your answer. I do need clarification though in an effort to see if I can fix it for my users. We're using Simplidigi to house the course. On my computer the font shows up okay, but on a colleague's it changes it to another font...we're all on the same version of explorer (not sure if that matters)

Ashley Terwilliger-Pollard

Hi Elizabeth,

If the font isn't installed on their system and they open up a .story file they'll see the default font of Open sans.

If you're using a custom font in a text entry or variable reference, those also won't translate to another user. Fonts can't be embedded in published output for variable text. As a result, default system fonts will be substituted for variable text. Default system fonts may be different for each computer, tablet, or smartphone where your content is viewed.

Elizabeth Klein

So now something else has surfaced, and I'm completely stumped! A user who is now seeing all slides within the course with a  gray background, They're suppose to be white, I see them as white when I launch the course the same way she does, and I adjusted the player settings as well. Is there another setting I should be looking at?? Thanks!

shane traynor

Hi Ashley,

Help! I am experiencing the same issues. My client uses Open Sans, published in HTML5 and uses Janison as the LMS, and is viewed in IE and also Chrome on Dell laptops and Surface Pros.

The issue is with the variable text (including the whole line/ paragraph it's in.  Whilst all laptops are configured the same, for some staff (but not me) the variable text changes to Times, this occurs in every instance variable text is used i.e. on the template header as well as in body text (see 'trainee screen' attached). This occurred in IE and Chrome. Does this mean Open Sans needs to be installed on every device?

variable font defaulting to Times

Interestingly on mine the font remains as Open Sans, however a difference is discernable - variable text renders slightly darker and sharper than standard text if you look closely (see 'My Screen' screenshot attached). I have Open Sans installed, why does the embedded version differ?

variable font remaining but rendering differently

I hope this information helps.  I love Storyline and want to keep the company utilising it as apposed to Captivate or Lectora but my client needs confidence in consistency of the published output. Please ask the developers to check out this problem, i.e. can variable text fonts be embedded somehow? In the interim is there a workaround you can suggest?

Thanks, any assistance is greatly appreciated,

Shane

Ashley Terwilliger-Pollard

Hi Shane,

Thanks for sharing the screenshots here. If you use a font within a variable reference or a text entry that the individual user does not have installed on their system it'll default to showing a system font - so if they didn't have Open Sans, it sounds like Times may be their system font. There currently isn't a way to change this in Storyline, and as I understand it it's based on the individual users system, fonts, browsers, etc. so that there isn't a programmatic workaround within Storyline. 

As for the shift you see in your output, the variable reference does adjust the text display slightly and display a crisper text often. That happens due to how the variable font is rendering while being viewed, vs the standard font in a text box that is essentially converted to an image upon publish. 

I hope that helps clarify - and if you're looking to ensure consistency, you may want to confirm with your clients which browsers (and versions) users will be accessing the courses in, and which fonts they are likel y to have installed on their systems. 

Ashley Terwilliger-Pollard

Hi Smruti, 

Are you seeing this behavior in the published output or difficulty with the font within your course? The variable references and the text entry fonts are not embedded within the published output and we rely on the system/browser defaults for what is displayed.  What browser(s) were you testing the courses out in to see the font change? Did you also confirm that it was uploaded to the intended environment vs. testing it locally? 

Smruti Shah

Hi, the difficulty is for text variable. My systems have Georgia font, and Georgia is also web-safe font, yet final html5 output did not have  I noticed that independent '.swf' file appeared to be completely fine. But the issue is only in HTML outputs. I was referring to this file here, this is exactly what I wanted, I want to be able to format inserted value of the text as per requirement of the slide. 

https://community.articulate.com/series/5/articles/adding-text-variables

Now here is a thing, there is a story. For making the story more enjoyable, users are suppose to insert names of lead characters they wish to read about. Paragraph one did not require names of any lead characters (i.e. Text Variable) . Paragraph 2 did. So for this story designing aspect of the story is screwed.

Story where lead

I tested it on chrome (as seen above) and firefox, both have the same issue. Yes, I had uploaded one of those file on my hosting to test, it had same issue, story I was working on did not have same font, wherever there is need of text variable input to be added.

Crystal Horn

Hey there Smruti.  I see what you're saying, and I'm able to see the same differences when I view files of my own on various devices.  When you add standard text and variables references to the same text box, you may find that it always uses single line spacing when previewed or published—even if you selected a different line spacing value.

Also, when we publish, a text box without variables becomes a static image and therefore can display with the chosen font.  But a reference to a text variable is dynamic, as it updates with the user's entries.  Its display is dependent on the system fonts particular to the device.  If you have a variable reference within the body of a text box, that whole text box become dependent upon the system fonts on the device being used to view the content, which is why it may look different than other text boxes without the reference.  

I can see where this issue is going to challenge your design idea, which I really do think is a good way to engage your learners.  Hopefully knowing this information will at least give you guidance as to how the text is expected to behave.

Smruti Shah

Hi Crystal,

Yes, I understand that non variable font are like images, but major issue lies in uncertainty. It is perfectly fine in preview, it is almost similar in .swf files we export, but issue arises with HTML5. Like I said I have created this whole thing on my laptop and it still appears different in my own laptop even without publishing. Any idea which font can be used for such variable, I might as well change font for all slides rather than having this kind of weird. I can see that this has been major complain of people since quiet some time now, is there any solution or coding we can edit for proper functioning of the output?

Moreover I believe Articulate tutorials needs to be edited as it explains you can change and format variable font, probably not true because though it appears correct in preview it changes with output.

https://community.articulate.com/series/5/articles/adding-text-variables

Crystal Horn

I completely understand where you're coming from.  The way it is working is making it extremely difficult for you to predict how it may appear on your user's device.  I'm really sorry for the frustration.

Are you using Storyline 1, Smruti?  The section in that article about formatting the text variable reference is probably not currently up to date with how the text is being handled, so I apologize for the misinformation.  I am bringing up this particular article with our team.  At this time, however, there is not a workaround for guaranteeing how the variable reference text will render.

Smruti Shah

Hey Crystal,

I am using Storyline 2. Yes, it was bit irritating because I had some expectation about the presentation for the content and things are still unclear, as to which font would actually be working and how to bring out best in terms of parity throughout the course. I don't mind even using the simplest of the font, as long as it helps maintain sameness throughout. Let me see and test few things, before trying out different tools for text variables. :) the solution provided in thread below seems to be fairly well solution.

Dave Cox

As I speculated above, you can control the font of the variable text in your HTML5 output.. If you use a web font, you can control what font displays regardless of whether the font lives on the users device. The example below shows how you can use Google's web font Open Sans.

Modify your story_html5.html file to add this line. immediately after the line that starts with
<link rel="stylesheet" ...

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">

Then go to the player.css file and add this code. You can add it pretty much anywhere except in the middle of another selector statement.

textarea, textformat {
   font-family: 'Open+Sans', sans-serif;
}

Replace the statement above 'Open+Sans' with the font of your choice. I test this, and it works as expected. I even tried a couple of pretty wild looking fonts that I know aren't on my system to be sure, and it still works.

Dave Cox

Hi Ashley,

You are correct, this will not have any affect in the flash output. It only works with HTML5. But with many people moving the HTML5, I think it might be a good option. I haven't had time to verify it for sure, but I believe it will work with Storyline 360 as well.

I don't know that I'll have time to do a video, but it is just a couple of minor edits to the published files. I don't think it would be too difficult to duplicate.

Smruti Shah

Thank you Dave, this is definitely workable solution, except for those who might constantly need different fonts for text variables. I would also like to confirm that at least for my output files, .swf files appear to be fine, but I am no coder or technical programming person to be able to re-embed swf files. But yes, I tried simple coding with respect to changing fonts in player.css and with Georgia, and it was working 'better' or to say that I am consoled we can control fonts, which has been major concern.

I won't mind recording tutorial video giving due credits to you all and share it with other members facing same issue, if things go well. :) Thanks guy

This discussion is closed. You can start a new discussion or contact Articulate Support.