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.
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.
Thanks for your update Geert and Ashley. Looking forward to the fix.
To be honest, i was surprised (and disappointed) that this issue is not Articulate top priortiy to fix - what's the point of having a world class tool, (which i think Articulate storyline is), when the content is blurry.
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!
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.
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.
When you include variable references in text elements, you may find that the font applied to the variable reference doesn't display as expected in HTML5 output or the Articulate Mobile Player app. See this article for more information.
7 years have passed and we still have the same bugs. I created an e-learning course with 122 slides, with multiple layers and text appearing everywhere. Do you really want me to create a variable for every single paragraph... can you please solve this problem instead?
You're right, Igor. This conversation is pretty dated and pre-Storyline 360.
I'd like you to share your project file with our support engineers to investigate what's happening with your permission. You can share it privately by uploading it here. It will be deleted when troubleshooting is complete.
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.
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.
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
360.
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.
Below are screenshots of what I'm seeing on-screen (please focus on the
font).
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.
The images did not attach when replying via email, so here they are.
In the editor:
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:
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.
Thank you for the details and the screenshots you shared!
I want to connect you with one of our support engineers so we can continue to troubleshoot what you're experiencing. I went ahead and opened a support case on your behalf, so you should hear from our team soon via e-mail.
I'm sorry you've hit this snag! I understand you are having an issue with fonts looking different when previewing or publishing. I’m happy to work with you to figure out why this is happening! I have a few follow-up questions regarding the situation so I can understand what you are experiencing a little better.
Which version of Storyline are you using? I am using Storyline version 3.75.30269.0.
Is this happening with more than one file or is this the only one?
How are you publishing your file?
What type of font are you using?
Also, would you be willing to share your file here or with our support engineers privately in a support case so we can troubleshoot?
Thanks for reaching out and I look forward to your response!
24 Replies
Hi John
You might want to look at this post
Cheers
Geert
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.
Thanks for your update Geert and Ashley. Looking forward to the fix.
To be honest, i was surprised (and disappointed) that this issue is not Articulate top priortiy to fix - what's the point of having a world class tool, (which i think Articulate storyline is), when the content is blurry.
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!
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.
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.
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.
Hi Muhammad,
Thank You for sending the file, but it says made in a newer version of Articulate? Is it made in Articulate 2? I only have Articulate 1
Sorry i'm using articulate 2
Hi Mandar!
When you include variable references in text elements, you may find that the font applied to the variable reference doesn't display as expected in HTML5 output or the Articulate Mobile Player app. See this article for more information.
7 years have passed and we still have the same bugs. I created an e-learning course with 122 slides, with multiple layers and text appearing everywhere. Do you really want me to create a variable for every single paragraph... can you please solve this problem instead?
You're right, Igor. This conversation is pretty dated and pre-Storyline 360.
I'd like you to share your project file with our support engineers to investigate what's happening with your permission. You can share it privately by uploading it here. It will be deleted when troubleshooting is complete.
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.
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:
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
360.
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
https://360.articulate.com/review/content/809caf97-3473-4c45-af45-877be52b061b/review
and I've attached the .story file for review.
Below are screenshots of what I'm seeing on-screen (please focus on the
font).
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.
The images did not attach when replying via email, so here they are.
In the editor:
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:
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.
Hi, Mark.
Thank you for the details and the screenshots you shared!
I want to connect you with one of our support engineers so we can continue to troubleshoot what you're experiencing. I went ahead and opened a support case on your behalf, so you should hear from our team soon via e-mail.
Hello,
I am experiencing the same issue for this with my presentation and custom fonts.
it seems that the correct font family is used - but the wrong degree of boldness
light -> regular
extrabold -> regular
what is the name of the font?
is the font a "VariableFont", if yes try to install instead the static version
Thank you! That worked!
wow, 8 years and still no fix, that's amazing.
I'm having the same issue here with quiz font, that are different.
Hi Ramadan,
I'm sorry you've hit this snag! I understand you are having an issue with fonts looking different when previewing or publishing. I’m happy to work with you to figure out why this is happening! I have a few follow-up questions regarding the situation so I can understand what you are experiencing a little better.
Also, would you be willing to share your file here or with our support engineers privately in a support case so we can troubleshoot?
Thanks for reaching out and I look forward to your response!
I'm having this same issue with the font Inter. It looks fine when I'm editing it, but when published it looks like a different font.
storyline don't support variable fonts in the web player (-> no Bold, SemiBold, Medium, Light, ...)
first deinstall the font, then install the static version of "Inter"