<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>

CC BY-SA 3.0
2017-05-04T18:08:34.230Z
In fact, Redactor sets Trebuchet as the font in redactor.min.css
Christian Steger
CC BY-SA 3.0
2017-05-04T08:20:40.653Z
2017-05-04T08:20:40.653Z
Seth Warburton
<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>

CC BY-SA 3.0
2017-05-04T20:21:24.370Z
2017-05-04T20:21:24.370Z
August Miller
<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>

CC BY-SA 3.0
2017-04-30T20:46:43.147Z
2017-05-01T17:32:05.073Z
2017-05-01T17:32:05.073Z
Christian Steger
<p>Redactor II uses Trebuchet as font, has ugly paddings, giant font sizes and other things.</p>

<p>This must be fixed...</p>

<redactor><css>
Ugly Redactor II and how to fix it with some CSS
# 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 plugin.


---

### Answer by username_1 on 2017-05-04. Score: 0

As already mentioned in this post 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/AugustMiller/craft-redactor-helvetica>

Effectively similar to the Control Panel CSS plugin, except that self-container and not extensible.


---

