Answers.Body: <p>As already mentioned in <a href="https://craftcms.stackexchange.com/a/19444/3679">this post</a> Redactor doesn't set Trebuchet as the font, your OS does.</p>
  
  <p>If you want Redactor to inherit all the styles from the control panel in Craft, to blend in seamlessly, you can do that with just:</p>
  
  <pre><code>.redactor-layer,
  .redactor-layer &gt; * {
    font: inherit !important;
  }
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-04T18:08:34.230Z
Answers.Text: In fact, Redactor sets Trebuchet as the font in redactor.min.css
Answers.UserDisplayName: Christian Steger
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-04T08:20:40.653Z
Answers.LastActivityDate: 2017-05-04T08:20:40.653Z
Answers.UserDisplayName: Seth Warburton
Answers.Body: <p>I was commiserating with some colleagues about this the other day, so I bundled up a stylesheet into its own angsty little plugin:</p>
  
  <p><a href="https://github.com/AugustMiller/craft-redactor-helvetica" rel="nofollow noreferrer">https://github.com/AugustMiller/craft-redactor-helvetica</a></p>
  
  <p>Effectively similar to the Control Panel CSS plugin, except that self-container and not extensible.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-04T20:21:24.370Z
Answers.LastActivityDate: 2017-05-04T20:21:24.370Z
Answers.UserDisplayName: August Miller
Answers.Body: <p><strong>Here is my eye-friendly code:</strong></p>
  
  <pre><code>/* Redactor|Fonts */
  [class^="redactor-"], [id^="redactor-"] {
      font-family: inherit !important;
  }
  
  /* Redactor|Toolbar */
  ul.redactor-toolbar a {
      padding: 12px 13px !important;
      height: auto !important;
  }
  div.redactor-dropdown, ul.redactor-dropdown {
      font-size: 13px !important;
  }
  a.redactor-dropdown-h3 {
      font-size: 18px !important;
  }
  
  /* Redactor|Tooltip */
  span.re-button-tooltip {
      z-index: 1 !important;
      bottom: -18px !important;
      background: none !important;
      color: #333f4d !important;
      font-size: 10px !important;
  }
  
  /* Redactor|WYSIWYG-Editor */
  div.redactor-layer {
      padding: 20px !important;
      font-size: 15px !important;
      line-height: 22px !important;
  }
  div.redactor-layer h3 {
      font-size: 20px !important;
  }
  
  /* Redactor|HTML-Editor */
  div.redactor-box textarea.open {
      padding: 20px !important;
      border-top: 1px solid #e3e5e8 !important;
      border-left: none !important;
      border-right: none !important;
      border-bottom: none !important;
      background-color: #333f4d !important;
      color: #fff !important;
      font-size: 12px !important;
      line-height: 18px !important;
  }
  </code></pre>
  
  <p>Just paste it into the <a href="https://github.com/lindseydiloreto/craft-cpcss" rel="nofollow noreferrer">Control Panel CSS</a> plugin.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-30T20:46:43.147Z
Answers.LastActivityDate: 2017-05-01T17:32:05.073Z
Answers.LastEditDate: 2017-05-01T17:32:05.073Z
Answers.UserDisplayName: Christian Steger
Body: <p>Redactor II uses Trebuchet as font, has ugly paddings, giant font sizes and other things.</p>
  
  <p>This must be fixed...</p>
  
Tags: <redactor><css>
Title: Ugly Redactor II and how to fix it with some CSS
ThreadText: # Ugly Redactor II and how to fix it with some CSS
  
  (Asked by: username_0 on 2017-04-30)
  
  Redactor II uses Trebuchet as font, has ugly paddings, giant font sizes and other things.
  
  This must be fixed...
  
  **Tags:** redactor, css
  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_0 on 2017-04-30. Score: 4 | Accepted answer
  
  **Here is my eye-friendly code:**
  
  ```
  /* Redactor|Fonts */
  [class^="redactor-"], [id^="redactor-"] {
      font-family: inherit !important;
  }
  
  /* Redactor|Toolbar */
  ul.redactor-toolbar a {
      padding: 12px 13px !important;
      height: auto !important;
  }
  div.redactor-dropdown, ul.redactor-dropdown {
      font-size: 13px !important;
  }
  a.redactor-dropdown-h3 {
      font-size: 18px !important;
  }
  
  /* Redactor|Tooltip */
  span.re-button-tooltip {
      z-index: 1 !important;
      bottom: -18px !important;
      background: none !important;
      color: #333f4d !important;
      font-size: 10px !important;
  }
  
  /* Redactor|WYSIWYG-Editor */
  div.redactor-layer {
      padding: 20px !important;
      font-size: 15px !important;
      line-height: 22px !important;
  }
  div.redactor-layer h3 {
      font-size: 20px !important;
  }
  
  /* Redactor|HTML-Editor */
  div.redactor-box textarea.open {
      padding: 20px !important;
      border-top: 1px solid #e3e5e8 !important;
      border-left: none !important;
      border-right: none !important;
      border-bottom: none !important;
      background-color: #333f4d !important;
      color: #fff !important;
      font-size: 12px !important;
      line-height: 18px !important;
  }
  
  ```
  
  Just paste it into the [Control Panel CSS](https://github.com/lindseydiloreto/craft-cpcss) plugin.
  
  
  ---
  
  ### Answer by username_1 on 2017-05-04. Score: 0
  
  As already mentioned in [this post](https://craftcms.stackexchange.com/a/19444/3679) Redactor doesn't set Trebuchet as the font, your OS does.
  
  If you want Redactor to inherit all the styles from the control panel in Craft, to blend in seamlessly, you can do that with just:
  
  ```
  .redactor-layer,
  .redactor-layer > * {
    font: inherit !important;
  }
  
  ```
  
  > **Comments:**
  > **username_0**: In fact, Redactor sets Trebuchet as the font in redactor.min.css  
  
  ---
  
  ### Answer by username_2 on 2017-05-04. Score: 0
  
  I was commiserating with some colleagues about this the other day, so I bundled up a stylesheet into its own angsty little plugin:
  
  <https://github.com/username_2/craft-redactor-helvetica>
  
  Effectively similar to the Control Panel CSS plugin, except that self-container and not extensible.
  
  
  ---
  
  