<p>I have <a href="https://github.com/lindseydiloreto/craft-cpcss" rel="nofollow noreferrer">Control Panel CSS plugin</a> too and changed Trebuchet in Redactor's rich text fields with:</p>

<pre><code>. redactor-styles &gt; * { font-family: 'Arial'; }
</code></pre>

<p>Trebuchet just showed up recently, I'm pretty sure wasn't there before.</p>

CC BY-SA 3.0
2017-03-11T17:22:09.670Z
2017-03-11T17:22:09.670Z
Darwin Spratt
<p>The font stack for Craft Admin <em>doesn't specify Arial</em>, that's the sans-serif fallback shown on <em>your</em> system as your machine doesn't have the only specified font Helvetica Neue.</p>

<pre><code>font-family: HelveticaNeue, sans-serif;
</code></pre>

<p>Given this it's probably better to let the system sans serif cascade down to Redactor, as it may not be either Helvetica Neue or Arial. </p>

<p>If you don't have Helvetica Neue in your system font book then you would get the <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-b" rel="nofollow noreferrer">default system sans</a>; Oxygen on KDE, Ubuntu on Ubuntu, Cantarell on Gnome, Fira Sans on Firefox OS, Roboto on Android, Droid Sans on older Android devices or Segoe UI for Windows machines with OS Vista or newer. Therefore I'd suggest inheriting whichever font Craft Admin is using:</p>

<pre><code>.redactor-layer * {
  font-family: inherit;
}
</code></pre>

CC BY-SA 3.0
2017-03-29T12:49:23.833Z
Nevertheless. The Redactor's editor uses another font than Craft which I find annoying.
Martijn La Feber
CC BY-SA 3.0
2017-03-30T12:41:39.297Z
Could not agree more! Just trying to highlight that the fix posted would only work on specific OS' and could be made more effective whilst still achieving the desired result. :)
Seth Warburton
CC BY-SA 3.0
2017-03-15T14:08:13.853Z
2017-03-15T14:08:13.853Z
Seth Warburton
<p>You could use <a href="https://github.com/lindseydiloreto/craft-cpcss" rel="noreferrer">the Control Panel CSS plugin</a> that lets you add arbitrary css to the control panel.</p>

<p>Then you could target all redactor fields like so:</p>

<pre><code>.redactor-layer * {
    font-family: 'Arial';
}
</code></pre>

<p><del><strong>EDIT</strong> slightly more troubling is that you are getting Trebuchet in the first place, it should be Arial anyway.</del></p>

<p><strong>UPDATE</strong> it turns out this change came about in a recent Craft update (<a href="https://craftcms.com/changelog#2-6-2963" rel="noreferrer">2.6.2963</a>) that updated Redactor II from 1.3.2 to 2.2. My best guess is that it crept in to the Redactor II 2.0 release, which also included the change to the toolbar icons.</p>

CC BY-SA 3.0
2017-03-13T13:27:10.147Z
Thanks for your help. I think it sucks that the whole interface of Craft CMS is Arial except the Redactor elements
Martijn La Feber
CC BY-SA 3.0
2017-03-13T13:33:21.943Z
I just verified what you are seeing - it came in a recent update to Craft which included a Redactor update, I will update my answer with the details.
Josh Angell
CC BY-SA 3.0
2017-03-15T14:04:45.260Z
Yeah, I just noticed the Trebuchet and thought I was losing my mind. Was wondering exactly this! Thanks for posting the answer
Nathan D Huening
CC BY-SA 3.0
2017-03-10T15:39:30.080Z
2017-03-13T13:45:46.700Z
2017-03-13T13:45:46.700Z
Josh Angell
<p>How do I change the default font (Trebuchet) of Redactor II to Arial, for instance?</p>

<p>I don't know how to override the default CSS of Redactor. Please help.</p>

<p>Tnx in advance!</p>

<redactor>
Change font of Redactor II
# Change font of Redactor II

(Asked by: username_0 on 2017-03-10)

How do I change the default font (Trebuchet) of Redactor II to Arial, for instance?

I don't know how to override the default CSS of Redactor. Please help.

Tnx in advance!

**Tags:** redactor

---

## 3 answers

### Answer by username_3 on 2017-03-10. Score: 9 | Accepted answer

You could use the Control Panel CSS plugin that lets you add arbitrary css to the control panel.
Then you could target all redactor fields like so:
.redactor-layer * {
    font-family: 'Arial';
}

EDIT slightly more troubling is that you are getting Trebuchet in the first place, it should be Arial anyway.
UPDATE it turns out this change came about in a recent Craft update (2.6.2963) that updated Redactor II from 1.3.2 to 2.2. My best guess is that it crept in to the Redactor II 2.0 release, which also included the change to the toolbar icons.

> **Comments:**
> **username_0**: Thanks for your help. I think it sucks that the whole interface of Craft CMS is Arial except the Redactor elements  
> **username_3**: I just verified what you are seeing - it came in a recent update to Craft which included a Redactor update, I will update my answer with the details.  
> **username_4**: Yeah, I just noticed the Trebuchet and thought I was losing my mind. Was wondering exactly this! Thanks for posting the answer  

---

### Answer by username_1 on 2017-03-11. Score: 3

I have Control Panel CSS plugin too and changed Trebuchet in Redactor's rich text fields with:
. redactor-styles > * { font-family: 'Arial'; }

Trebuchet just showed up recently, I'm pretty sure wasn't there before.


---

### Answer by username_2 on 2017-03-15. Score: 3

The font stack for Craft Admin doesn't specify Arial, that's the sans-serif fallback shown on your system as your machine doesn't have the only specified font Helvetica Neue.
font-family: HelveticaNeue, sans-serif;

Given this it's probably better to let the system sans serif cascade down to Redactor, as it may not be either Helvetica Neue or Arial. 
If you don't have Helvetica Neue in your system font book then you would get the default system sans; Oxygen on KDE, Ubuntu on Ubuntu, Cantarell on Gnome, Fira Sans on Firefox OS, Roboto on Android, Droid Sans on older Android devices or Segoe UI for Windows machines with OS Vista or newer. Therefore I'd suggest inheriting whichever font Craft Admin is using:
.redactor-layer * {
  font-family: inherit;
}

> **Comments:**
> **username_0**: Nevertheless. The Redactor's editor uses another font than Craft which I find annoying.  
> **username_2**: Could not agree more! Just trying to highlight that the fix posted would only work on specific OS' and could be made more effective whilst still achieving the desired result. :)  

---

