6

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!

9

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.

  • 1
    Thanks for your help. I think it sucks that the whole interface of Craft CMS is Arial except the Redactor elements – Martijn La Feber Mar 13 '17 at 13:27
  • 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 Mar 13 '17 at 13:33
  • 1
    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 Mar 15 '17 at 14:04
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.

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;
}
  • Nevertheless. The Redactor's editor uses another font than Craft which I find annoying. – Martijn La Feber Mar 29 '17 at 12:49
  • 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. :) – Seth Warburton Mar 30 '17 at 12:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.