Search code examples
javascripthtmlcsseditorwysiwyg

Set Default Font Type of WYSIWYG Editor

I am programming a WYSIWYG editor. I want the editor to have a default font of Avenir Next. However, no matter what I do, I cannot seem to be able to set the default font type of the content editable iframe. (I can include an option to change the highlighted text's font type, but that is not what I want. I want the font type to already be set to Avenir Next when I first type into the iframe.)

Below I've included the code for my textarea and iframe. Can someone give me the CSS or lines of javascript that will help me tackle this issue? Thank you! 

<textarea  name = "content" id = "content" style = "display: none;" >
</textarea>
<iframe onload="iframe()" name = "editor" id = "editor" contenteditable="true" style = "width: 100%; height: 400;">
</iframe>
Solution

  • You have to set the font family property on the styles of that iframe, for example:

    body { font-family: 'Avenir Next' }