How to customize the list of fonts in the text editor

How to customize the list of fonts in the text editor


Compatible XF Versions:

• 1.5
  

To change the list of fonts in the editor, you need to edit the file located at "/js/xenforo/bb_code_edit.js". The file is minified, so we will need to unfold some text. The full version is available in the "full" folder; you can copy and use that file instead if you like, but for this tutorial I'll be using the existing minified version.

1. Navigate to "/js/xenforo/"
2. Make a copy of the "bb_code_edit.js" file before proceeding.
3. Edit the file and look for the fonts. ctrl/cmd F + "arial" may help
4. Unwrap the code with the font array. It should look like this example:



Use this syntax when adding new fonts:


The <font name> is the important part: it is what's displayed in the list, and is used in the [font=] code (and therefore the CSS font-face). They must match the name of the fonts you are adding.
The <font stack> is ONLY used to style the font name in the editor list. This is dumb, because only one font is specified when you actually use it. The font you see in the list should look the same as what you get when you use it, so when you configure your fonts, just make it the same as the font name on the left. (see example below)

Here's an example of what I'm using:


The result (part of it):



Remember that if using regular fonts, the viewer must have them installed. I recommend using only Microsoft's core fonts for the web and webfonts. To make webfonts work in the editor.

Make your changes and save it. As the file is probably cached you'll need to hard-reload to get the changes (hold shift when clicking reload, in Chrome at least).

The end. I have spent way too much time on this