font-preview | Instant text viewer to check css font properties | Data Manipulation library

I am creating a custom font preview box for my website (I am a type designer and would like my customers to be able to test-drive fonts before purchase) and I have got it all coded as simply as possible using javascript, css, and html. The whole thing works, but I am having one problem.

The box works as follows:

• there is a textarea at the top with placeholder text where the customer can enter his or her own text
• there are is a dropdown menu of fonts to select (one of these is "selected" via html) and a text box to change the font size
• then below those, there is a line of output that shows either the placeholder or the customer-typed text.

The problem I am having is that I would like the output to show in the "selected" font right from the beginning but instead it is showing in the website's default font. It doesn't change to the selected font until I un-select and re-select that font in the dropdown menu.

I can set this in the html using a tag, but that only affects the placeholder text. If the customer types anything in the box, it changes right back to the default font and the customer must un-select and re-select the font in the dropdown to change the output. So that's quite confusing.

Here's the JSBin link: https://jsbin.com/lenutufibu/2/edit?html,css,js,output

Here's the code I've used: