Set default font-family in jWYSIWYG

Question

I set the font-family in the jquery.jwysiwyg.js (line-# 497 where < body > is defined) and added a CSS …

$('#wysiwyg').wysiwyg({css : { fontFamily: 'Arial, Tahoma', fontSize : '12px', color : '#333333'}});

The textarea shows Arial as font-family but when I click the remove formatting button it turns to Times New Roman. Is there any way I can set a default font to prevent this? I don't want Times as a base font.

Josh Smith · Accepted Answer · 2011-12-29T19:40:15.080

2

Because jwysiwyg renders in an iframe, the styles of the containing page will not render (as it is actually a separate HTML file) and so jwysiwyg will default to the standard font for the browser, which is usually Times New Roman.

You can use an external stylesheet to counter this issue like so:

$('#wysiwyg').wysiwyg({
    css: 'editor.css'
});

And within editor.css you would put body { font-family: "Arial, Tahoma"; }.

edited Dec 29 '11 at 19:40

answered Dec 29 '11 at 19:32

Josh Smith

14,674
18
72
118

Thanks for your help. When I apply the font via a css file it's the same thing. When I delete the formatting it shows Times New Roman. Here I removed formatting from Ipsum … `
Lorem Ipsum Dolor Sit Amet
` – suntrop Dec 30 '11 at 09:31
1

Sorry … sorry. My fault. Didn't set the path to editor.css correctly. Relative path hasn't worked but an absolute path did the work :-) Thanks!! – suntrop Dec 30 '11 at 10:58
@suntrop Sure. Be sure to accept the answer if it worked for you. – Josh Smith Dec 30 '11 at 12:55
FWIW, I just ran into this same question and found that relative paths do work, but you must specify a location relative to the web page location, not the script location. – neurotik Oct 15 '12 at 04:44
in your new css you should write: body.wysiwyg (notice the class) in order to apply only to the editor – Matías Cánepa May 24 '13 at 21:28

score 0 · Answer 2 · edited Apr 10 '15 at 21:41

Use arial black or arial narrow, for example:

font_formats: "Andale Mono=andale mono,times;"+
        "Arial=arial narrow,avant garde;"+
        "Arial Black=arial black,avant garde;"+
        "Courier New=courier new,courier;"+
        "Georgia=georgia,palatino;"+
        "Impact=impact,chicago;"+
        "Symbol=symbol;"+
        "Tahoma=tahoma,arial,helvetica,sans-serif;"+
        "Times New Roman=times new roman,times;"+
        "Verdana=verdana,geneva;"+
        "Webdings=webdings;"+
        "Wingdings=wingdings,zapf dingbats",

Set default font-family in jWYSIWYG

2 Answers2