Problem HTML5 Variables Font not correct

I have a problem with the html5 output of variables by using firefox.

To explain the scenario:

I have a Variable, let's call it %Number%". It should be visible in Font Arial 24.

When I publish it and watch the flash version there is no problem. The output shows the data of the variable Number in the correct size.

But if I watch the content by using the html5-file there is an issue. The Variable %number% is visible very small in the Font Articulate 10 (or sth. comparable)

Can I solve this issue?

Thanks in Advance

9 Replies
Ashley Terwilliger-Pollard

Hi Patrick,

Are you viewing the HTML5 file on the same computer/system? There are some known issues with customizing the fonts for the variable entry or reference and it will revert to system/default fonts and sizes when viewing the HTML5 output. Also, to properly test HTML5 content you'll want to confirm you're using one of the supported browsers here.

Mark Shepherd

Hi Ashley:

I am running up against this problem now when trying to view the Player in HTML5 for a learning project I am working on.

I have two font display issues in my project:

  1. Text entered into data entry question slides appears in Times New Roman (browser's default font), 
  2. Also, text containing a Variable Reference has also been changed to Times New Roman (again: browser default font).

EDIT:  Reading other articles that cross-reference this subject suggest it might be possible to adjust/correct these adjusted font details by rewriting the Player's CSS core stylesheet by hand.

My question: Is the changing of displayed text fonts/styles when using variable references still overridden by Storyline 2 to use the default font for the browser/display?

In other words, is this item STILL an issue for Storyline *2* as WELL as Storyline *1*?

It's frustrating, because the font I am using and would LIKE to use is, ironically enough, Articulate's own Storyline font, but that is getting overridden on Publish.



Leslie McKerchie

Hi Mark!

Same result in Storyline 1 and Storyline 2:

You may find that fonts applied to variable references in your published Articulate Storyline 2 output aren't the fonts you expected.

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.

Smruti Shah

Is there any solution to this issue? I mean this is actually creating the huge issue for now because it leads to lack of consistency, I had apparently found a font to be normal in .html regular file, but it cannot be viewed in mobile phones, and HTML 5 is changing the complete look of a slide, and it looks really bad. 

Smruti Shah

Yes, Leslie, it is. I have a story, the story has lead characters, readers are given freedom to choose names of lead characters as they want to read it. So if Para 1 has no text variable and Para 2 does, hence font changes. See ideally I don't mind testing fonts, this was made on computer and it's being tested on same computer, but my major concern is with formatting of having atleast 1.5 between line spacing or parity in font. I am not even able to apply formatting to text. :(

Please have a look at this screenshot for an example,

2 paragraphs of same story with different font