Schriftarten der Website in den WP-Texteditor einbinden

Bei der Arbeit mit WordPress kann es sinnvoll und wünschenswert sein, im Texteditor dieselbe Schriftart zu sehen wir im Frontend. Das ist allerdings nicht immer gegeben. Je nach verwendetem Theme können die Fonts des Themes in den Editor eingebunden sein, müssen es aber nicht zwangsläufig. Mit ein paar recht einfachen Handgriffen lässt sich die Schriftart des Frontends jedoch auch nachträglich in den Editor einbinden.

Screenshot des Texteditors

Im Urzustand zeigt der Texteditor des Twenty Nineteen Themes die Schriftart Hoefler Text.

Es kann aus verschiedenen Gründen notwendig oder angenehm sein, auch im Backend einer Website die Schriftarten zu sehen, die im Frontend verwendet werden; seien es ein besserer Eindruck des Layouts, die gezieltere Wahl von Überschriften oder schlicht ein schnellerer Eindruck davon, wie der entstehende Beitrag bzw. die Seite am Ende aussehen wird.

Schriftart ändern mit der editor-style.css

Bestimmt wird die verwendete Schriftart vom Stylesheet editor-style.css. Nicht jedes Theme hat dieses CSS zwangsläufig, aber man kann seinem Childtheme (und man sollte immer mit Childthemes arbeiten!) sehr einfach eine solche erstellen.

Diese Datei wird im root-Verzeichnis des Childthemes gespeichert und muss folgende Informationen enthalten:

  1. Wo sind die zu verwendenden Fonts gespeichert?
  2. Wie sollen diese Fonts verwendet werden?
Screenshot der Verzeichnisstruktur

Mögliche Verzeichnisstruktur des Childthemes. Die editor-style.css liegt im root, die Fonts haben einen eigenen Ordner.

Ersteres wird über den Pfad definiert. HALT! Falls Du Google Web Fonts verwendest, sollten diese aus datenschutzrechtlichen Gründen stets lokal und nicht, wie von Google vorgeschlagen, direkt eingebunden werden. Unverzichtbares Hilfsmittel dabei ist der Google Web Fonts Helper von Mario Ranftl, aber das ist eine andere Geschichte.

Zweiteres wird wie gewohnt im CSS definiert, so dass unsere editor-style.css am Ende beispielsweise so aussieht:

/* montserrat-regular - latin_latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('fonts/montserrat-v12-latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
src: local('Montserrat Regular'), local('Montserrat-Regular'),
url('fonts/montserrat-v12-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/montserrat-v12-latin_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/montserrat-v12-latin_latin-ext-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/montserrat-v12-latin_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/montserrat-v12-latin_latin-ext-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

… ggf. weitere Fonts …

body {font-family: 'Montserrat', sans-serif;}

Fertig. Bzw., wenn Du andere Fonts für Überschriften etc. verwendest, folgen weitere Deklarationen.

AUFGEPASST: Im Twenty Nineteen Theme heißt diese Datei style-editor.css. Verwendst Du allerdings den Classic Editor, heißt sie wieder editor-style.css.

functions.php ergänzen

Screenshot

Text im Font des Frontends. Euer treuer Chronist war faul und hat, wie man sieht, die h1 nicht deklariert.

Nun muss das CSS noch mithilfe der functions.php eingebunden werden. Die geschieht mit einem simplen Einzeiler:

add_editor_style();

Bzw., falls das CSS in einem eigenen Verzeichnis liegt, mit Angabe des Pfades, also beispielsweise so:

add_editor_style( 'css/editor-style.css' );

Die komplette Funktion sieht folgendermaßen aus:

function meine_editor_styles() {
add_editor_style( 'pfad_zum_css/editor-style.css' );
}
add_action( 'after_setup_theme', 'meine_editor_styles' );

So. Nun sollten die Frontend – Fonts auch im Texteditor erscheinen.