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
Edit domains and sitemaps
Apr 4, 2025
By myq.

How to create a sitemap when using an edit domain

Block Types and CIF Data
Apr 2, 2025
By mlocati.

This tutorial describes how Concrete works with blocks data, and how you can create custom block types that works well when exporting and importing data with the CIF XML format.

Customize the default page title
Mar 12, 2025

Change the default " :: " and/or "site name :: page title" formatting separator to something else.

Configure Composer to work with a Page Type
Feb 20, 2025
By myq.

Fix the "Unable to load block into composer. You must edit this content from within the context of the page." error message

Permissions for editors in a multilingual site
Feb 2, 2025
By myq.

How to set up a multilingual Concrete CMS site for groups of language-specific editors

Restoring deleted pages using advanced search
Jan 16, 2025
By myq.

How to recover deleted pages when there are more than a few to choose from.

Improvements?

Let us know by posting here.