Font looks different when preview/publish

hi Heroes.

Building my first course using Storyline, very exciting and fun so far....except when i preview/publish the course, the text looks less crisp/sharp. It looks fine in the editing mode, but once i preview/publish, it looks slightly blurry, and it's quite annoying. I am sure someone will pick this up when i do my presentation next week.

Any idea how to fix this...EASILY?



17 Replies
Ashley Terwilliger-Pollard

Hi John,

As Geert pointed you to that thread, I did want to let you that it's still with our QA team and as Justin Wilcox mentioned in that thread it's likely to be fixed within the next version of Storyline. I don't have any information on the timeline or date for that release but we'll post about it in the fourms.

You may also want to follow along with our Word of Mouth blog to stay up to date on happenings with Articulate.

Mandar Phadke

I am quite surprised that this issue seems to be still unresolved? I have the same problem. The font in the editor is fine but when published it is kind of blurry or less sharp. If you Simply type a line in a text box in Storyline 1, publish it and then type a line in this forum and publish it ,you can easily see the difference. The only workarounds that I have come across so far have been
a) Set the Story stage size very big (say 1280 X 720) and then select Articulate or Verdana fonts of a bigger size (like 18) and then publish and set the player to match the browser window. OR

b) Set any variable (say x) and then at the end of every text box call it as %x% (simply enter the %x% after the text ends). This makes the text sharper when published but sometimes it becomes smaller (say 2 font sizes smaller) with some blank lines added, so it requires some adjustments to the text box.
Any other workarounds, please post here!

Muhammad Nurul islam

Apparently text become bitmaps once you publish them. To keep them as text you can try to put them into variables. The text box where you insert the  variable should be the same size as if the original text is in there. so if its the normal text with box 200x 500, when you insert the variable (where you put the text in) th text box should also be 200x 500. If not the text size will adjust to the box size. Variable text are text which can be selected. Normal text can't be selected since they are  bitmaps.

Mandar Phadke

Thank You Muhammad Nurul islam, but I have not understood. I just type text into the text box and then the dimensions adjust. Are you saying that I should set a fixed size for the text box and then enter the variable? Could you please explain? I am not very familiar with Articulate, have just started using it.

Muhammad Nurul islam

should be like this, but it depends on what font you are using

here is the preview mode

I think when its view in flash mode it wouldn't be too off, when it's html5 mode then it will be much worse (IMO).

for the variable text change the box to' not autofit text' so the text will stay consistent

 attached is the story line file


It's inline with your explanation number 2.  I think it depends on what font you are using and what size.

Mark Hughes

I don't think it matters that Igor added to an old post. What he said is still relevant now as an outstanding issue.

I am having the same problem even now in June 2022. Published text can look very different to what is shown in the Storyline editor. When using the bahnschrift font, it looks crisp and well spaced in the editor, but larger, fat and over-tightly spaced when published, making the design and therefore me look amateur.

Andrea Koehntop

Hi Mark!

I apologize for the issues you are experiencing with the bahnschrift font in the published output.

I have tested this on my end in the latest version (Update 64) of Storyline 360, and the bahnschrift font appears crisp and normal when published to Review 360 (viewing in the latest update of Chrome).

I want to ask you some follow-up questions to begin troubleshooting:

  • What version of Storyline are you using?
  • How are you publishing your file?
  • Would you be able to share your .story file with us either publicly here, or privately in a case? We will delete it from our systems when troubleshooting is complete. 
Mark Hughes

Hi Andrea,

Despite your own tests, I just tested by uploading to Review 360 and the
same issue remains.

I am using the most recent version updated a few days ago using Articulate

I was testing by using the 'preview' option, but since you asked I've also
tested on Review 360 and also a locally published version, all having the
same defects.

Here is the link to the review file
and I've attached the .story file for review.

Below are screenshots of what I'm seeing on-screen (please focus on the

In the editor:
[image: image.png]

When previewed or published on Review 360:

[image: image.png]

When published locally as web version:

[image: image.png]

Additionally, I have noticed that other elements in my other projects such
as small icons and sometimes radio buttons can also appear deformed or move
position when published, but appear correct in the editing environment. Let
me know if you would like to see these, too.

Mark Hughes

The images did not attach when replying via email, so here they are.

In the editor:

editor view

Also note that:

- the lines on the pen and paper icon are (reasonably) evenly distributed, but with some smudging.

- the orange and yellow boxes don't align perfectly horizonally, even though I've ensured they're on the exact same y position, which I've entered manually in the 'Size and Position' panel.


When previewed or published locally or on Review 360:

published view

You can also see that:

- the lines on the pen and paper icon are now unevenly distributed and look incorrect

- the iris in the top-right corner icon has moved and now looks wrong.