Looking for suggestions and tips on how to dynamically or programmatically change the font using JS in SL 360 as I am exploring a multilingual course in a single SCORM and since other fonts may not support special characters, the best way I can think of is to use JS. Open to other suggestions.
As Storyline360 has GSAP ( Greensock library ) built in i use GSAP's TextPlugin to edit and change any text in Storyline. For that i wrote this reusable function.
function changeText(_target,_text,_size,_color){ gsap.registerPlugin(TextPlugin);
That you then can call at any time and change any text like this...
let staticTextField = document.querySelector("[data-acc-text='staticTf']"); changeText(staticTextField ),"Changed Text",56,'#51AE5A');
So it is a 'YES' you can change the Font used with Javascript. For the above mentioned solution you need the TextPlugin from GSAP however. ( https://greensock.com/textplugin/ ) Im quite sure you can do it also without GSAP with jQuery or pure Vanille Javascript, but as i use GSAP all the time for me this is the easiest solution.
Biggest drawback is however that Storyline doesnot support embedding Fonts for dynamic use. So when you use a Font that isnot available on the users computer...it wont show. Already did a feature request for adding either Webfonts or the option to embed custom Fonts in Storyline.
4 Replies
No idea if you can do it in javascript, have you tried a unicode font?
You could switch the textbox to a different state that uses a different font
As Storyline360 has GSAP ( Greensock library ) built in i use GSAP's TextPlugin to edit and change any text in Storyline. For that i wrote this reusable function.
function changeText(_target,_text,_size,_color){
gsap.registerPlugin(TextPlugin);gsap.set(_target, {text: {value: _text,},fontSize: _size,letterSpacing: "3.5px",fontFamily: "Digital",color:_color});}That you then can call at any time and change any text like this...
let staticTextField = document.querySelector("[data-acc-text='staticTf']");changeText(staticTextField ),"Changed Text",56,'#51AE5A');So it is a 'YES' you can change the Font used with Javascript. For the above mentioned solution you need the TextPlugin from GSAP however. ( https://greensock.com/textplugin/ )
Im quite sure you can do it also without GSAP with jQuery or pure Vanille Javascript, but as i use GSAP all the time for me this is the easiest solution.
Biggest drawback is however that Storyline doesnot support embedding Fonts for dynamic use. So when you use a Font that isnot available on the users computer...it wont show. Already did a feature request for adding either Webfonts or the option to embed custom Fonts in Storyline.
Thank you for the reco Math! Appreciate it. Will try this one.
Hi Phil. Do you have any reco for unicode fonts aside from Arial MS?