Forum Discussion
Dynamically change font using Javascript
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.
4 Replies
- PhilMayorSuper Hero
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
- wdzCommunity Member
Hi Phil. Do you have any reco for unicode fonts aside from Arial MS?
- MathNotermans-9Community Member
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.- wdzCommunity Member
Thank you for the reco Math! Appreciate it. Will try this one.
Related Content
- 8 months ago