How to change font in textarea using javascript?

Asked

Viewed 804 times

3

You can change the text font of a textarea using javascript?

javascript

  • I changed your question to what it was before, because it has already received answers that solve your initial question, so you should not change to a different context, or else everyone who answered will have to edit your answers. If you are not satisfied, open a new question with the details you wanted, or look for an existing question that satisfies your question.

  • Yes, you can change it.

4 answers

2


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>

  • I believe that op because he just put the tag [tag:javascript] in the question, ideally answers that solve using javascript only, because you are not sure if he can use [tag:jquery] or that he should use.

  • 1

    Paulo, I actually took a look at his profile and realized that he does use Jquery. As much as the tag is javascript I’m sure it will help him or anyone else who in the future has the same search need. Colleagues have already responded using javascript only and I believe that this is an excellent way to leave a very complete subject in all situations. Remember: Jquery is also javascript.

  • I meant that maybe he can’t include the jQuery library in the project in question that he’s working on, I didn’t mean that he doesn’t use jQuery in general. Because Jquery is a javascript library that helps a lot, but not always in all cases you can or should use it in your project. In my view, I believe it is more organized to have only javascript answers here because in the future it opens the possibility of having the question "How to change font in textarea using Jquery" and then having more content/answers related to it. But it’s my opinion only

  • If you’re not going to make a large framework, or complex system, or giant website, consider using pure Javascript. JQUERY: USE OR NOT? https://www.revista-programar.info/artigos/jquery-usar-ou-nao-usar/

2

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 source and publish 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 - bold or light weight characters. 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";

1

document.querySelector('textarea').style.fontFamily = 'Impact';
<textarea></textarea>

1

Using only according to the tag of your question and assuming that you only use a 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 Name for your textarea, and then you can access and change it directly this way:

Let’s assume you put an id meuTextareain your textarea:

document.getElementById('meuTextarea').style.fontFamily = 'Verdana';
<textarea id=meuTextarea>Teste</textarea>

  • right more if in case I want to import the source

  • In this case you should look at the answers to this question: https://answall.com/q/127400/3082

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.