<p>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 <a href="https://imperavi.com/redactor/plugins/" rel="nofollow noreferrer">original fontfamily plugin here</a> (the one that comes with the Craft Redactor plugin is minified). Checking the source code, you can see that it looks for a <code>fontfamily</code> option and falls back to the default list you see in the editor if it doesn't exist:</p>
<pre class="lang-js prettyprint-override"><code>this.opts = app.opts;

this.fonts = (this.opts.fontfamily) ? this.opts.fontfamily : ['Arial', 'Helvetica', 'Georgia', 'Times New Roman', 'Monospace'];
</code></pre>
<p>If you add the <code>fontfamily</code> option to your Redactor config, the plugin uses it :</p>
<pre class="lang-json prettyprint-override"><code>{
    &quot;plugins&quot;: [
        &quot;fontfamily&quot;
    ],
    &quot;fontfamily&quot;: [&quot;Arial&quot;, &quot;Roboto&quot;]
}
</code></pre>
<p>See the documentation on <a href="https://github.com/craftcms/redactor#redactor-configs" rel="nofollow noreferrer">Redactor configs</a>.</p>
<p>Keep in mind that the plugin does <em>not</em> 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.</p>
<p>You can register CSS in the backend using a simple module through <code>Craft::$app-&gt;view</code>. See <a href="https://www.yiiframework.com/doc/guide/2.0/en/output-client-scripts#register-css" rel="nofollow noreferrer">Registering CSS in the Yii2 documentation</a>.</p>

CC BY-SA 4.0
2021-12-02T16:30:47.587Z
Glad to know it's not just me that finds the redactor documentation somewhat lacking. I used [Control Panel CSS](https://plugins.craftcms.com/cp-css) to register css since it makes it so easy.
Augustine Calvino
CC BY-SA 4.0
2021-12-02T16:34:48.947Z
@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
CC BY-SA 4.0
2021-12-02T08:56:39.760Z
2021-12-02T09:02:22.927Z
2021-12-02T09:02:22.927Z
MoritzLost
<p>@MoritzLost has the answer to my question, but I also found a workaround that I thought would be worth sharing.</p>
<p>Using a plugin like <a href="https://plugins.craftcms.com/redactor-custom-styles" rel="nofollow noreferrer">Redactor Custom Styles</a> allows to you add configs of the form below to add custom elements, attributes, etc.</p>
<pre><code>    &quot;textColor&quot;: {
      &quot;dropdown&quot;: {
        &quot;red&quot;: {
          &quot;args&quot;: {
            &quot;tag&quot;: &quot;span&quot;,
            &quot;class&quot;: &quot;color-red&quot;,
            &quot;type&quot;: &quot;toggle&quot;
          }
        },
        &quot;green&quot;: {
          &quot;args&quot;: {
            &quot;tag&quot;: &quot;span&quot;,
            &quot;class&quot;: &quot;color-green&quot;,
            &quot;type&quot;: &quot;toggle&quot;
          }
        }
      }
    },
</code></pre>
<p>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.</p>
<p>The Advantages to this approach, and why in my case I will probably still use it over the answer above, are</p>
<ul>
<li>I can specify fallback fonts for each option, rather than just a single font per option</li>
<li>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.</li>
</ul>
<pre><code>font-primary {
    font-family: var(--font-primary);
}
</code></pre>

CC BY-SA 4.0
2021-12-02T16:39:58.333Z
2021-12-02T16:39:58.333Z
Augustine Calvino
<p>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</p>
<p><a href="https://i.sstatic.net/wzszZ.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/wzszZ.png" alt="redactor font family menu" /></a></p>
<p>Is there a way to customize what font options show up here? I couldn't find any documentation about it.</p>

<redactor>
How to customize fonts with redactor font menu
# How to customize fonts with redactor font menu

(Asked by: username_0 on 2021-12-01)

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](https://i.sstatic.net/wzszZ.png)](https://i.sstatic.net/wzszZ.png)

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

**Tags:** redactor

---

## 2 answers

### Answer by username_1 on 2021-12-02. Score: 2 | Accepted answer

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.

> **Comments:**
> **username_0**: Glad to know it's not just me that finds the redactor documentation somewhat lacking. I used [Control Panel CSS](https://plugins.craftcms.com/cp-css) to register css since it makes it so easy.  
> **username_1**: @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.  

---

### Answer by username_0 on 2021-12-02. Score: 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);
}


---

