jQuery Forum

You can do it by using jQuery very easily.

Add an id to your dropdown menu like 'font' and use below code.

1.         var x = $('#inputText').val();
2.         var font = $('#font option:selected').text();
3.         $('#displayText').css('font-family', font).html(x);
4.         $('#inputText').val('');

See the example here with js code and updated html

http://jsfiddle.net/vy4dq9r3/

I saw you have some custom fonts which are not supported by default. For those you need to use ttf file.

I saw you have all ttf files, just include those to your css file and include that css to your webpage then all your custom fonts will be available.

You can import fonts to css like

@font-face {
    font-family: Palatino;
    src: url('Palatino.ttf');
}

Not every browser works with TTF fonts. If you want it to work with every browsers, you need to provide font files in multiple formats.