How to customize fonts with redactor font menu

Question

In Redactor it is easy to enable the font-family plugin via your redactor config, which gives us a menu in the wysiwyg shown below

Is there a way to customize what font options show up here? I couldn't find any documentation about it.

Answer 1

It's undocumented (like all Redactor plugins), but you can configure the list of fonts used in the JSON config you assign the Redactor field in the settings. You can download the original fontfamily plugin here (the one that comes with the Craft Redactor plugin is minified). Checking the source code, you can see that it looks for a fontfamily option and falls back to the default list you see in the editor if it doesn't exist:

this.opts = app.opts;

this.fonts = (this.opts.fontfamily) ? this.opts.fontfamily : ['Arial', 'Helvetica', 'Georgia', 'Times New Roman', 'Monospace'];

If you add the fontfamily option to your Redactor config, the plugin uses it :

{
    "plugins": [
        "fontfamily"
    ],
    "fontfamily": ["Arial", "Roboto"]
}

See the documentation on Redactor configs.

Keep in mind that the plugin does not include the fonts themselves (the default fonts are mostly web-save, except maybe for Helvetica). So if you want to use a custom webfont that some user might not have installed on their machine, you'll have to include the font-family definition and source files yourself. Make sure you include the font definition in both the frontend and the backend, so that your editor can see how the text will look with that font in the backend.

You can register CSS in the backend using a simple module through Craft::$app->view. See Registering CSS in the Yii2 documentation.

Answer 2

@MoritzLost has the answer to my question, but I also found a workaround that I thought would be worth sharing.

Using a plugin like Redactor Custom Styles allows to you add configs of the form below to add custom elements, attributes, etc.

    "textColor": {
      "dropdown": {
        "red": {
          "args": {
            "tag": "span",
            "class": "color-red",
            "type": "toggle"
          }
        },
        "green": {
          "args": {
            "tag": "span",
            "class": "color-green",
            "type": "toggle"
          }
        }
      }
    },

Using this you can add a span with a given style, or with a given class which then applies your font face (or any other styles) via your css files.

The Advantages to this approach, and why in my case I will probably still use it over the answer above, are

• I can specify fallback fonts for each option, rather than just a single font per option
• I can use css custom properties (variables) to define what font I am using, which happens to be necessary for my case. See below snippet.

font-primary {
    font-family: var(--font-primary);
}