Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-11T17:22:09.670Z
Answers.LastActivityDate: 2017-03-11T17:22:09.670Z
Answers.UserDisplayName: Darwin Spratt
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-29T12:49:23.833Z
Answers.Text: Nevertheless. The Redactor's editor uses another font than Craft which I find annoying.
Answers.UserDisplayName: Martijn La Feber
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-30T12:41:39.297Z
Answers.Text: 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. :)
Answers.UserDisplayName: Seth Warburton
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-15T14:08:13.853Z
Answers.LastActivityDate: 2017-03-15T14:08:13.853Z
Answers.UserDisplayName: Seth Warburton
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-13T13:27:10.147Z
Answers.Text: Thanks for your help. I think it sucks that the whole interface of Craft CMS is Arial except the Redactor elements
Answers.UserDisplayName: Martijn La Feber
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-13T13:33:21.943Z
Answers.Text: 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.
Answers.UserDisplayName: Josh Angell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-15T14:04:45.260Z
Answers.Text: Yeah, I just noticed the Trebuchet and thought I was losing my mind. Was wondering exactly this! Thanks for posting the answer
Answers.UserDisplayName: Nathan D Huening
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-10T15:39:30.080Z
Answers.LastActivityDate: 2017-03-13T13:45:46.700Z
Answers.LastEditDate: 2017-03-13T13:45:46.700Z
Answers.UserDisplayName: Josh Angell
Body: <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>
  
Tags: <redactor>
Title: Change font of Redactor II
ThreadText: # 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](https://github.com/lindseydiloreto/craft-cpcss) 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](https://craftcms.com/changelog#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](https://github.com/lindseydiloreto/craft-cpcss) 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](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-b); 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. :)  
  
  ---
  
  