Add more fonts to the Redactor-Plugin "font family"

This is a community-contributed tutorial. This tutorial is over a year old and may not apply to your version of Concrete CMS.
Aug 18, 2015

Note: This has been tested only in version 5.7.4.2 Also, this is for packages or packaged themes.

  1. Copy the fontfamily.js from /concrete/js/build/vendor/redactor/ to your package folder: /packages/package_handle/js/build/vendor/redactor/
  2. Rename the file to something unique like allmyfonts.js
  3. In the allmyfonts.js file , rename the RedactorPlugins function from fontfamily to allmyfonts:

    //...
    (function($) {
        RedactorPlugins.allmyfonts = function() {
        return {
    //...
    
  4. Still in the allmyfonts.js file, add your fonts to the array fonts in the init() function:

    //...
    init: function () {
        var fonts = [ 'Verdana', 'Helvetica', 'Georgia', 'Times New Roman', 'Monospace', 'Ubuntu', 'And So on' ];
        var that = this;
        var dropdown = {};
    //...
    
  5. In the package controllers on_start() method, register the allmyfonts.js file:

    public function on_start()
    {
        $pkg = $this;
        $al = Asset\AssetList::getInstance();
        $al->register(
            'javascript', 'allmyfonts', 'js/build/vendor/redactor/allmyfonts.js', array('position' => \Asset::ASSET_POSITION_FOOTER), $pkg
        );
        $al->registerGroup('allmyfonts', array(
            array('javascript', 'allmyfonts'),
        ));
        $plugin = new Plugin();
        $plugin->setKey('allmyfonts');
        $plugin->setName('allmyfonts');
        $plugin->requireAsset('allmyfonts');
        \Core::make('editor')->getPluginManager()->register($plugin);
    }
    
  6. Call (require) your allmyfonts.js in the single page controllers on_start()method:

    public function on_start()
    {
        $this->requireAsset('javascript', 'allmyfonts');
        // Important! Don't forget to call the `parent::on_start()` method at the end!
         parent::on_start();
    }
    
  7. On the single page, initialize the redactor:

    $editor = Core::make('editor');
    $editor->getPluginManager()->select('allmyfonts');
    
  8. And call it in the DOM:

    print $editor->outputStandardEditor('text_area_name_attribute', 'content');
    
  9. Clear cache & Reinstall the package

Recent Tutorials
WebOps Tutorial on Running and Upgrading a Concrete CMS Website
May 2, 2024
By myq.

Describes how to deploy, manage, and upgrade a Concrete CMS website

Using the Concrete Migration Tool Addon
Apr 27, 2024

How to use the Concrete CMS Migration Tool

Create custom Site Health tasks
Apr 19, 2024
By myq.

This tutorial will guide you through the creation of a new Site Health task

Reusing the same Express entity in multiple associations
Apr 11, 2024
By myq.

How to create and manage multiple associations in Express

Express Form Styling
Apr 11, 2024
By myq.

Different ways to style Express forms

Setting addon/theme version compatibility in the marketplace
Jan 9, 2024

For developers worn out with setting the latest addon or theme version manually across too many core versions, here is a JavaScript bookmarklet to do it for you.

Improvements?

Let us know by posting here.