Free Mod How to add custom font in CKEditor in vBulletin 5

[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

[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]

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]

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]

Glad to help!

Thanks for confirming this hack works.

[Calamity]

I guess that I spoke too soon, actually. It works as in it's in the list and stuff, but when I tried to actually write with it (Century Gothic) then the box would just show "Fonts" again, and the default font would apply instead. I don't think there should be an issue with my css_fonts.css file, but we'll see. And yes I did change the config to match css_fonts.css instead of css_additional.css.

* Update: It was indeed an issue with the css_fonts.css. I had moved my theme around in Style Manager. Before it was a child of one of the premade VB ones, and that's why it inherited templates from them, so I had to edit the css_fonts.css in "Default Style", as it wouldn't let me do it any other way. I completely forgot that I moved my theme so it doesn't have any other "parents" anymore. My bad! It's working great now.

[glennrocksvb]

It works for me.

[Calamity]

Sorry, I edited my reply just as you wrote that. I managed to fix my errors.

[Felix2]

I went though something like this a while back when I went to a dark theme. Black text and black background just wasn't working for me.
Got very frustrated all the CSS didn't work.
Turned out, the .JS was injecting its own CSS and ignoring my CSS. Hate these sort of hacks, but sometimes you must.
Appreciate this Font hack.
Somewhat off topic here, I have made a number of such hacks, forgot most, but the one I can't seem to nail down is the maximize function.
In the default CKEditor it exists, and in older version of vB. But not in 5x that I can tell.

I upgraded the code to the latest 4.5.11, but I think it is the extra vB .js files which are hiding it, something like the config.removeButtons function.
I also don't get the special character or spell checker buttons, but these I know are overwritten for browser support functions.

This is how my edit box appears-

You can see I have the advanced editor, search engine tools, photo gallery, short URL, Polling, advance Smilies... also, I can collapse the entire tools bar. I can also stretch the edit window vertically. I just can't get it to go full screen and back.
Any ideas what needs to be edited/hacked to return that function?

[SpaceStar]

hi Glen

First of all, thanks for a superb blog.

I went through all setting and got the Font in CKeditor box and could also choose it, but it didn't showed up as thought.

Any hint?

[glennrocksvb]

Did you do step 1?

[msouefi]

hello all
my website http://aqarspot.com is in Arabic language do i have to make other steps

[glennrocksvb]

msouefi, did you follow all the steps and it's not working for you?

[Blackhorse]

Hello Glenn,

is is still valid to add font through these steps?


Thanx

[glennrocksvb]

Blackhorse, I'm not sure. Just try it. But make backups of the files first before editing them. If it doesn't work, then revert back to the backup.