2

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

redactor font family menu

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

2 Answers 2

2

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.

2
  • 1
    Glad to know it's not just me that finds the redactor documentation somewhat lacking. I used Control Panel CSS to register css since it makes it so easy. Dec 2, 2021 at 16:30
  • 2
    @AugustineCalvino Yeah, redactor is a mess … the plugins in particular are pretty half-assed. Control Panel CSS works fine, though I try to avoid it now – the function is so small that it can be integrated in a couple lines of code through a module, not worth it adding a plugin to the site that has to be updated and maintained.
    – MoritzLost
    Dec 2, 2021 at 16:34
0

@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);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.