Forum Discussion

wdz's avatar
wdz
Community Member
5 years ago

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

  • 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

    • wdz's avatar
      wdz
      Community Member

      Hi Phil. Do you have any reco for unicode fonts aside from Arial MS? 

  • 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.

    • wdz's avatar
      wdz
      Community Member

      Thank you for the reco Math! Appreciate it. Will try this one.