How to change font in textarea using javascript?

Using Jquery:

$('textarea').css('font-family', 'Arial');

Example:

$('div').on('click', function(){

  $('textarea').css('font-family', 'Arial');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>Depois de 10 anos o menino virou adulto.</textarea>
<div>Clique para mudar a fonte</div>

document.getElementById('meuTextarea').style.fontFamily = 'nomequalquer';
document.getElementById("meuTextarea").style.fontSize = "xx-large";
document.getElementById("meuTextarea").style.color = "red";
document.getElementById("meuTextarea").style.wordSpacing = "10px"

@font-face {
  font-family: 'nomequalquer';
  src: url(https://fonts.gstatic.com/s/tangerine/v8/HGfsyCL5WASpHOFnouG-RFtXRa8TVwTICgirnJhmVJw.woff2);
}

<textarea id=meuTextarea>Olá George, gostou?</textarea>

You can download the font and publish it to the server.

Example with .TTF

CSS

@font-face {
  font-family: nomequalquer;
  //baixe a fonte e publique no seu servidor
  src: url('SANTO___.TTF');
}

JavaScript

  document.getElementById('meuTextarea').style.fontFamily = 'nomequalquer';
  document.getElementById("meuTextarea").style.fontSize = "xx-large";

  

Some other properties:

• fontStyle - character style. Values: normal, italic, oblique, and inherit example document.getElementById("meuTextarea").style.fontStyle = "italic";

• fontWeight - characters in bold or light weight. Values: bold, bolder, lighter, normal, 100, 200 .... example document.getElementById("meuTextarea").style.fontWeight = "bold";

• textAlign - horizontal alignment. Values: center, justify, left and right. example document.getElementById("meuTextarea").style.textAlign = "center";

• letterSpacing - spacing between characters. Values: usually in units. example document.getElementById("meuTextarea").style.letterSpacing = "1.2em";

• wordSpacing - spacing between words. Values: usually in units. example document.getElementById("meuTextarea").style.wordSpacing = "20px";

Using only javascript tagged according to your question and assuming that you use only one textarea:

document.getElementsByTagName('textarea')[0].style.fontFamily = 'Verdana';

<textarea>Teste</textarea>

If you have more than one textarea on your page, you can set an ID or a Name for your textarea, and then you can access and change it directly:

Let's say you've put a meuTextarea id in your textarea:

document.getElementById('meuTextarea').style.fontFamily = 'Verdana';

<textarea id=meuTextarea>Teste</textarea>