HTML Code to Display Different Font Styles for User Input String

Ask the community
, , ,
1

Question:
How to create a code to simulate text input in different fonts?

Product:
Wix Editor, Wix Studio Editor

I just need a page with an input box where the user will type a name, and then I want to display this name in 10 different fonts.
I already have this code in my laptop with the .otf files.
Is there an easy way to do it in wix ?

2

Hi, Gabi_Nelson !!

Are you saying that you’ve completed the HTML code to achieve that behavior? If so, you can set up an iframe element on Wix and run the native HTML code. Alternatively, I think it’s possible to achieve this purely with Wix features. I quickly tested it, and it should work. To implement it, first, add a text input element to the Wix page and attach the onInput() event to it. Then, try adding ten text elements to the page (apply different fonts to each of them). Finally, write the following Velo code on your page code. :raised_hands:


$w('#input1').onInput((event) => {

    $w("#text1").text = event.target.value;
    $w("#text2").text = event.target.value;
    // ...
    $w("#text10").text = event.target.value;

});

With this code alone, it should be possible to generate multiple font strings that are linked to the input value. After that, feel free to customize it according to your requirements. :wink: :+1:

1 Like
3

Thank you! Its working like a charm