Can I add a custom text box with changing font?

Ask the community
,
1

I would like to add a text box to my website like the one attached where customers type in what custom text they would like and then they click the fonts below and the custom text changes to that font so they are able to view what their text looks like in different fonts and choose whatever one they like best. Is this possible to do? I’ve done some research and i think i might need a back end developer to do this but they are really expensive. Can anyone give advice? Thanks

836×772 40.1 KB

2

Hi,
its not possible to change the font of a textbox by code.

However it is possible to change a textfield’s font by code.

What you should do is

  1. Make a textfield to display your text.

  2. Make a textBox to input the text

  3. add your buttons in the right font, and name the button exactly as the font should be called.

If you have done that you can add some lines of code.

Add a variable at the top of the page.

I named my textfield txtStyle:
my textBox is called textBox1
and my button is called btnChangeFont

var myFont = "Verdana" //this should be the standard font to start with

//This function will change your html font & text
function changeFont(YourText) {
    $w("#txtStyle").html = '<span style="font-family: '+myFont+';">'+YourText+'</span>'

}
//This function you will need to change the fond when you click on a button
function changeFontName(fontName){
myFont =fontName
$w("#txtStyle").html = '<span style="font-family: '+myFont+';">'+$w("#textBox1").value +'</span>'
}
//This function is your onClick (to change your font)
export function btnChangeFont_click(event) {
    changeFontName(event.target.label)   
    
}
//This will be used when typing
export function textBox1_input(event) {
    changeFont(event.target.value)
}

I hope evrything is clear,
If you have any questions, do feel free to ask.

Kind regards,
Kristof

3

Hi, thanks so much for your help! Im completely new to building websites so im a little confused though haha
I have added a custom text option to the website, underneath is the option to add more options, like colour and size ect, is that where i add the fonts? How do i change the font options to the actual fonts because all that is showing is to display in a list or colour. When you say that you cant change the textbox by code but you can change the texfield, do you mean that the custom text wont appear in the different fonts when clicked but the font option can be in the different fonts? Apologies if this is really basic to you and i sound stupid, i literally have no knowledge on building websites.