Redactor II uses Trebuchet as font, has ugly paddings, giant font sizes and other things.
This must be fixed...
Craft CMS Stack Exchange is a question and answer site for administrators, end users, developers and designers for Craft CMS. It only takes a minute to sign up.
Sign up to join this communityHere 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.
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;
}
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.