Customize fonts in WYSIWYG/TinyMCE Editor


Well-known member
Add/Remove Fonts
Tutorial how to add/remove and customtitle fonts in Xenforo WYSIWIG/TinyMCE Editor.

file: js/tinymce/themes/xenforo/editor_template.js

search following part in the file:
theme_xenforo_fonts : "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva",

and remove all fonts you don't want. i wanted only Arial and Helvetica (and if one has no Helvetica, switch to Arial, sans-serif, should do it automatically on Windows, but just to be sure ;)) So the part is now:
theme_xenforo_fonts : "Arial=arial,helvetica,sans-serif;Helvetica=helvetica,arial,sans-serif",

you can also add new fonts (forumvisitors need to have the font installed on their computer to see different fonts in forumposts), just add it with same logical structure into this code part. example adding famous new windows font: "Calibri".

Now the code is like:
theme_xenforo_fonts : "Arial=arial,helvetica,sans-serif;Helvetica=helvetica,arial,sans-serif;Calibri=calibri,arial,sans-serif",

Why did I add ",arial,sans-serif" after "calibri"? Cause i want, that if a forumvisitor doesn't have Calibri installed on his PC, automatically show the text in font Arial (sans-serif). this works same priority logic like in CSS/HTML.

Change Fonttitle

You can change fonttitle that is shown in dropdown to forumvisitor by editing first part of a font-entry like i want to title "Arial" to "My Font":
-> "My Font=arial,helvetica,sans-serif"

After the "=" you can define which fonts should taken in which priority order, like you would do in CSS/HTML.
Top Bottom