Change font of Redactor II

Question

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!

Answer 1

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.

Answer 2

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.

Answer 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;
}