How to add custom font in CKEditor in vBulletin 5

[glennrocksvb]

Glad to help!

Thanks for confirming this hack works.

[Calamity]

I now edited it with Notepad++ instead, and I noticed pretty quickly that I had somehow managed to put a "," after "/* customConfig:"", */".

Tested now with your .css code and font, and it worked perfectly! Just gonna edit it for my own font(s) now. Thanks a lot! Awesome work!!

[glennrocksvb]

This means there's a syntax error in the js file. Did you include the trailing comma in the code that needs to be removed or commented out?

[Calamity]

After I edited the ckeditor-rollup523.js, then I got this error:

"There was an error loading the rich text editor. You may use the plain text editor, or you may reload the page to try again. If the problem persists, please contact the administrator."

[glennrocksvb]

Adding custom fonts in vBulletin 5 is not possible without hacking the existing ckeditor JS files.

NOTE: Since this is a JS hack, these changes will not be carried over when you upgrade. New JS files are generated with a new suffix based off the version number (e.g. xxxxx-523.js for vB 5.2.3) when upgrading. So you need to re-apply these changes every time you upgrade.

The changes needed are not straightforward. You have to follow the following steps:

1. Add the @font-face rule for the custom font at the very top of css_additional.css template or in Sitebuilder (Style > CSS Editor). The sample code below is for the custom font I'm using on this site.
   
   

   @font-face {
   	font-family: 'Orbitron';
   	font-style: normal;
   	font-weight: 700;
   	src: local('Orbitron-Bold'), url(https://fonts.gstatic.com/s/orbitron/v7/Y82YH_MJJWnsH2yUA5AuYY4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
   	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
   	}

2. Edit /js/ckeditor/config.js file in a text editor to add the custom font and include css_additional.css to the editor. Insert the highlighted lines below before the closing }.
   
   

   CKEDITOR.editorConfig = function( config ) {
   
   	...
   	...
   	...
   	[strike]
   [COLOR=#0000FF]// add css_additional.css which contains the @font-face rule for the custom font (by default, it was only adding css_editor.css)
   	config.contentsCss = [
   	pageData.baseurl + '/' + pageData.ckeditorCss,
   	pageData.baseurl + '/' + pageData.ckeditorCss.replace(/css_editor\.css/i, 'css_additional.css')
   	];[/COLOR][/strike][COLOR=#0000FF]
   
   	// add custom font name (format: <font display name>/<actual font name>);
   	// add as many custom fonts as needed and separate them with semicolon (e.g. 'Orbitron/Orbitron;Century Gothic/centurygothic;')
   	config.font_names = [/COLOR][COLOR=#FF0000]'Orbitron/Orbitron;'[/COLOR][COLOR=#0000FF] + config.font_names;[/COLOR]
   
   	};

   NOTE: The parts with strike-through may not be needed in the latest vB version anymore. Try without it first. This mod was done long time ago during vB 5.2.3 and that code was needed at that time.
3. Edit /js/ckeditor-rollup-5xx.js file in a text editor. If your forum is version 5.2.3, then the file is ckeditor-rollup-523.js.
   
   Search for: (comma included)
   

   customConfig:"",

   and replace it with:
   

   /* customConfig:"", */

   We are basically removing that setting which causes ckeditor to ignore the custom config in /js/ckeditor.config.js which you modified in Step 2. In other words, this change tells ckeditor to use the custom config.js file.

Btw, this hack was inspired by this thread in the vBulletin support forums by Calamity.
http://www.vbulletin.com/forum/forum...-font-to-forum