font size smaller in HTML5 with text variables


I have a small problem... It's the word...

When I create a course with a lot of text variable (ex : %name%...) and when I publish in flash and html5, you can see the result :

The first picture is on my ipad in html 5, and the second is on my computer in Flash.

I tried differents fonts (arial, courrier, helvetiva...) Nothing change.

Someone have au solution because, in fact, it's a big problem for me!!!!!!


61 Replies
Boris Wesemann

Yes, thank you!

It seems that I am using the newest version including the recent update. I am using the test version, downloaded two days ago. By clicking on help it says it is Version: "Update 2: 1212.1412".

My Problem:

The font size of variables is not changing. I can change the font size of my variables (for example %CaseNumber%) in the articulate storyline project to whatever I want - when I puplish the project the font size of variables is 12pt. It doesn't matter wheather I tried it with a larger or smaller font size in the project. The font soze of my variables won't change.

Christine Hendrickson

Good morning Boris,

Thank you very much for the details.

Have you tried the solution that Johanna posted earlier? Looks like she was able to get the font size to stay the same, but it does look like the style still changes. 

This is something we're still investigating. If you'd like, we'd be happy to take a look at the project files and see if the problem you're experiencing is related to the same issue. The more information we're able to collect, the faster we'll be able to work toward a fix. 

If you can, please upload your file using this form. Once you've done so, you'll receive an email confirmation with a case number. Please share that number with me, so I can take a look and keep this thread updated.

Thanks again, Boris.


Boris Wesemann


Tank you for your response!

I tried it with Johannas solution - didn't work for me. Maybe I missed anything. It sounds like it should work for me as well. But it is no perfect solution so I have not spend that much time on it.

What I explore:

If you have a text-variable and normal text in one text box, you can change the size - but style is always "articulate". That is also no perfect solution, but good enough for me by now.

What I am asking myself:

Is there a line in player.css where you able to change the style of this font after you exported your project by changing the script?

Christine Hendrickson

Hi Boris,

Afraid I won't be able to give any suggestions on the .CSS file. Hopefully someone with experience modifying that file can give you some advice. 

It probably wouldn't hurt to ask over in the Building Better Courses section as well. Maybe some additional exposure to your question will help in getting some tips from the community. :)


Roger Brownlie

I've a similar problem based on this tutorial

I find that when I try and display a long text variable the font size diminishes to an unreadable level - like point size 2 or 3.

How can I keep the font size at a readable size for longer text strings?


Ashley Terwilliger-Pollard

Hi Zio, 

I'm not sure I understand your fix, but if you were able to get it working as you'd like I'm happy to hear that. If it's something that you think is a bug, please share your .story file with our team so that they can test it fully and determine if it's something that needs to be reported to our QA team. 

G McKinzie

ok, this is way too technical jargon for me.  I am having an issue with my variable font size as well.  I have a text entry box with the text going to a second layer that the user can print.  Whatever I type shows up on the 2nd layer in a very small font size.  How do I set it up so the font size is readable (12 point)?

Leslie McKerchie

Hi G! 

Without seeing what you are working with, it's hard to diagnose, but I do think you can check the following:

For the text box that contains the actual text variable, is the size large enough to contain the text that's entered by the user or from the variable? For example, if the user needs to enter multiple lines of text, but the actual text box is smaller than those lines, it may shrink the data that's pulled into the actual box on the slide. So, you can make the text box for the variable larger in the slide itself and it should accommodate that text when it's populated. 

If all the tips shared in this thread do not assist you, I hope that you can share your .story file so that we can see what you have going on and, if need be, it can be shared privately here.

Zio Fonta

hi G, this other fix worked for me: if your operating system is setted to put the "," character as decimal separator (how we have here in Italy) than you could experience that problem. if so, try to check with this test: go to your operating system language settings and in advanced setup change the decimal separator to "." instead than ",".

close and reopen storyline and try to republish. let us know. thanks

if it worked after changing OS settings, all people using Storyline in country where decimal separator is "," must change their OS settings to make a course be published correctly....

Jacek Chrabąszcz

Hi Alain,

I had the problem with fonts used in text variables, e.g.

But now I use a very simple solution: a little change in css, for instance you can add above tag with your font definition, let's say:

.textlib {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #000;
  or you can change some lines in player.css. The result is this:


PS I've got a PC, and I've tested it on Firefox 26  and Chrome 31.

Ashley Terwilliger-Pollard

Hi Joris and welcome to Heroes,

I was reading back through this thread - and I can't find a user who shared their files and system set up with us. Since I don't have that decimal set up on my system as a few other users mentioned, I haven't been able to recreate it - but if you'd like to share a .story file with us and some additional information about your set up we can investigate further. 

Joris Sprunken

Ashley Terwilliger said:

Hi Joris and welcome to Heroes,

I was reading back through this thread - and I can't find a user who shared their files and system set up with us. Since I don't have that decimal set up on my system as a few other users mentioned, I haven't been able to recreate it - but if you'd like to share a .story file with us and some additional information about your set up we can investigate further. 

I don't have a .story-file available anymore (since my solution caused some more problems in the Quiz review). But you can change your decimal separator to comma and reproduce the problem (the reverse of the 'solution' for us Europeans), can't you?

Ashley Terwilliger-Pollard

Hi Joris,

Ah - never looked to see if I could change my decimal separator (never had a need until now...) but I see that I can. Do you have a .story file to share here with me, just so I can confirm we're using the same set up for other elements and then I'll be able to test this further? 

Joris Sprunken

To be honest, I don't really feel like sharing our customers files when you can just create a file with one slide, containing one textbox and one variable, add the variable to the textbox and publish for web.

I'm using Storyline with update 6 and there are multiple users reporting this bug, so small chance it has something to do with my particular setup.

Lynette Burnham


Was there any firm resolution found for this issue? I have the latest update of storyline 2 and am also experiencing this problem. When I upload variables into a text box and publish - everything is fine if it is viewed from story.html. However, if it is viewed with story_html5.html the font and size change.

Ashley Terwilliger-Pollard

Hi Lynette,

First off it looks like you're viewing the content locally, and we'd want to see how this looks when viewing in the intended publish environment and ensuring you're using one of the supported browsers here for HTML5. 

Also, to clarify you mentioned uploading variables - do you mean that the user entered or through Javascript or some other way of connecting to a database or code? The latter is not something we can offer support for.