No announcement yet.

How to add custom font in CKEditor in vBulletin 5

This is a sticky topic.
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free How to add custom font in CKEditor in vBulletin 5

    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( 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 ) {
      [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')
      	// 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)
      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.
    Last edited by glennrocksvb; 03-02-2019, 02:18 AM.
    Helpful? Donate. Thanks!
    Fast VPS Host for vBulletin: A2 Hosting & IONOS

    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."
    Last edited by Calamity; 09-06-2016, 01:43 PM.


      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?
      Helpful? Donate. Thanks!
      Fast VPS Host for vBulletin: A2 Hosting & IONOS


        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!!


          Glad to help!

          Thanks for confirming this hack works.
          Helpful? Donate. Thanks!
          Fast VPS Host for vBulletin: A2 Hosting & IONOS


            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.
            Last edited by Calamity; 09-06-2016, 02:48 PM.


              It works for me.

              Click image for larger version

Name:	custom-font.png
Views:	173
Size:	8.6 KB
ID:	594
              Helpful? Donate. Thanks!
              Fast VPS Host for vBulletin: A2 Hosting & IONOS


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


                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  Glad you sorted it out.

                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.
                Click image for larger version

Name:	Clipboard01.jpg
Views:	199
Size:	100.0 KB
ID:	963

                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-

                Click image for larger version

Name:	image.jpg
Views:	224
Size:	304.3 KB
ID:	1602

                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?


                  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?


                    Did you do step 1?
                    Helpful? Donate. Thanks!
                    Fast VPS Host for vBulletin: A2 Hosting & IONOS


                      hello all
                      my website is in Arabic language do i have to make other steps


                        msouefi, did you follow all the steps and it's not working for you?
                        Helpful? Donate. Thanks!
                        Fast VPS Host for vBulletin: A2 Hosting & IONOS


                          Hello Glenn,

                          is is still valid to add font through these steps?



                            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.
                            Helpful? Donate. Thanks!
                            Fast VPS Host for vBulletin: A2 Hosting & IONOS