Wie lässt sich für Gutenberg Noto Serif abschalten?

Ein Font, der 800 Sprachen kann ("no tofu"). Aber wie lässt sich für Gutenberg Noto Serif abschalten?
Ein Font, der 800 Sprachen kann. Aber wie lässt sich für Gutenberg Noto Serif abschalten?

Nachdem ich kürzlich meinen allerersten Blick auf WordPress 5.0 mit Gutenberg, dem neuen Standardeditor, gerichtet hatte, kam in der Diskussion die Frage auf, wie sich für Gutenberg Noto Serif abschalten lässt. Also der Webfont, den Gutenberg direkt von Google bezieht und bei der Bearbeitung von Beiträgen und Seiten nutzt. Oder sagen wir besser: den Gutenberg bereithält für Themes, die keine eigenen Definitionen für die neue Bearbeitung mitbringen. So oder so: Gutenberg baut immer eine Verbindung zu Google Fonts auf. Unabhängig davon, ob das datenschutzrelevant ist oder nicht, ist es lästig. Wenngleich es für die Nutzung von Google Noto Serif an sich einen Grund gibt: WordPress mag wie Noto kein Tofu!

Googles Noto und WordPress mögen kein Tofu

Tofu, das steht nicht nur für dieses Sojaprodukt, das nicht besonders appetitlich aussieht und auch nur mit viel Kochkunst überhaupt schmackhaft sein kann. Tofu steht außerdem für jene kleinen Kästchen inmitten eines Textes, die darauf hinweisen, dass sich hier ein Schriftzeichen nicht darstellen lässt. Wenngleich dies in weit verbreiteten Sprachen wie Englisch, Russisch, Chinesisch oder auch Deutsch eher selten vorkommt, gestaltet sich das Ganze für manch andere Sprache doch schwieriger. Schwierig kann es auch immer dann werden, wenn unterschiedliche Sprachen in einem Text vorkommen.

Grund dafür ist, dass die meisten Zeichensätze nur einen begrenzten Vorrat an Zeichen umfassen. Und selbst der sogenannte Unicode kennt noch immer nicht alle. Zudem braucht es dann aber auch noch eine Schriftart, die all diese Zeichen umsetzen kann. Und hier kommt Googles Noto ins Spiel: Noto kann über 800 Sprachen darstellen. Was wohl der Hauptgrund sein dürfte, warum die WordPress Entwickler ausgerechnet diesen Font so toll finden.

Ein Schritt zurück: Wieder Google Fonts im Backend

Zwischen 2013 mit der Version 3.8 und 2016 mit der Version 4.6 nutzte WordPress für die Darstellung der Schrift im Backend den Google Font Open Sans und bezog ihn mittels steter Verbindung von Google. Dann folgte die Besinnung zurück zu Systemschriftarten. Die finden für das Backend auch jetzt noch Anwendung, jedoch nicht im direkten Zusammenhang mit Gutenberg. Der neue Editor baut nun immer eine Verbindung zu dem Google Font Noto Serif auf und stellt damit alle Textarten im Rahmen der Bearbeitung dar.

Dies gilt aber auch nur, wenn das aktive Theme es zulässt. Denn letztlich verantwortlich für die Darstellung aller Textarten ist das aktive Theme. Das legt nicht nur fest, wie es nach vorne aussieht. Auch kann es entscheiden, welche Schriftart im Editor Anwendung findet. Also auch für den Gutenberg Editor. Wenngleich das noch nicht jedes Theme macht.

Damit sind vier Szenarien denkbar:

  1. Das Theme nutzt einen anderen Google Font für das Frontend und die Bearbeitung.
  2. Oder es nutzt einen anderen Google Font für das Frontend, nicht aber für die Bearbeitung.
  3. Das Theme nutzt für das Frontend und Gutenberg Noto Serif.
  4. Es sind gar keine Google Fonts im Spiel, weil das Theme auf Systemschriftarten setzt.

Fall 1: Das Theme nutzt einen anderen Google Font

Sagen wir, das aktive Theme nutzt den Google Font Lato und bindet diesen auch für Gutenberg ein. Dieses Szenario der eigenen Festlegung wird sich sicherlich zum häufigsten Vertreter entwickeln. Schließlich wollen die meisten Themeentwickler wahrscheinlich schon in der Bearbeitung zeigen, wie eine Seite oder ein Beitrag im Frontend aussehen wird. Welchen Font auch immer so ein Theme nutzen will, es legt dies in seiner functions.php fest und definiert die Nutzung mittels zweier CSS-Dateien, eine für die Editor Styles und eine für die Gutenberg Styles. Wie genau diese Dateien heißen, hängt vom Theme ab.

Das Dumme an der Sache: So gibt es mindestens zwei Verbindungen, eine von Gutenberg ausgehend, die andere vom Theme. Aber immerhin geht es um unterschiedliche Fonts (siehe Fall 3).

Fall 2: Das Theme verzichtet auf einen speziellen Font für Gutenberg

Nicht jedes Theme hat bereits CSS-Defintionen, bei denen es um die Darstellung von Gutenberg geht. Deshalb ist auch der zweite Fall ein häufiger Vertreter. Jedenfalls greift hier tatsächlich Gutenberg mit seinem Noto Serif ein.

Fall 3: Das Theme heißt Twenty Fifteen und nutzt Noto Serif für Frontend und Gutenberg

Der dritte Fall betrifft zum Beispiel das Theme Twenty Fifteen. Mit einem aktiven Twenty Fifteen kommt es nun gleich zu zwei Verbindungen zu Noto Serif: eine von Gutenberg ausgehend, die andere vom Theme. Absurd!

Fall 4: Das Theme heißt Twenty Nineteen und nutzt Systemschriftarten

Der vierte Fall trifft zum Beispiel auf das neue Standardtheme zu. Twenty Nineteen nutzt weder für das Frontend, noch für Gutenberg Google Fonts. Geschweige denn besagten Noto Serif Font. Tatsächlich sind es Systemschriftarten, mit denen sich das neue Standardtheme begnügt. Dennoch stellt Gutenberg die Verbindung her.

Denn: Gutenberg stellt immer die Verbindung her

Der entscheidende Punkt ist nun, dass Gutenberg die Verbindung zu Google Fonts immer herstellt. Auch wenn es nur im zweiten Fall vielleicht sinnvoll ist. Und dies macht Gutenberg, weil es nun wieder im WordPress Core so vorgesehen ist. Weil die Entwickler es so wollen.

Bleibt die Frage, wie man das wieder loswird. Immerhin reden wir hier vom Core, den ändert man nicht mal eben so.

Mit Disable Google Fonts für Gutenberg Noto Serif abschalten

Hilfe schafft einmal mehr das Plugin Disable Google Fonts von Milan Dinić. Das hatte ich einst schon mal für das Abschalten von Google Fonts für das Frontend empfohlen. Nun bietet der Entwickler neben der bisherigen Funktionalität, sprich: dem Kappen der Verbindung zu allen Fonts, die in den Twenty Themes Verwendung finden, auch die Funktion, für Gutenberg Noto Serif abzuschalten. Und das klappt wunderbar.

Allerdings gilt das nur für Noto Serif und all jene Google Fonts, die der Entwickler berücksichtigt hat. Das sind schon eine ganze Menge. Halt die üblichen Verdächtigen und ein paar mehr. Trotzdem funktioniert die Trennung nicht immer. Und das hat was mit der Technik zu tun, mit der die Themeentwickler ihren Font einbauen. Halten die sich nicht an das Vorgehen der Wahl – sprich: an die Technik, die Gutenberg nutzt -, klappt es auch nicht mit dem Kappen der Verbindung.

Auf jeden Fall lässt sich dank Plugin für Gutenberg Noto Serif abschalten. Gegebenenfalls hat man dann aber vielleicht noch eine weitere Verbindung am Hals, die vom Theme ausgeht.

Nach dem Kappen: Eigene Systemschriftart für Gutenberg definieren

Wenn die Standard Serifenschriftart des eigenen Systems (in meinem Fall Times New Roman) solch ein Dorn im Auge ist, dass sich damit nicht arbeiten lässt, kann man nun natürlich eine eigene Definition fahren. Dazu braucht es die beiden CSS-Dateien des Themes, die dafür zuständig sind. Eine heißt irgendwas mit Editor, die andere irgendwas mit Gutenberg. Dort finden sich die entsprechenden Definitionen. Um die updatesicher ändern zu können, kopiere man sich beide Dateien ins Childtheme.

Bietet das Theme noch keine entsprechenden Dateien, wird es schwierig. Denn dann müsste man sich erst einmal einen Überblick über alle Elemente verschaffen, die Gutenberg so mit sich bringt, in der Folge die eigenen Definitionen festlegen und diese als entsprechende CSS-Dateien schließlich in der functions.php des Childthemes einreihen. Sportlich! Aber was macht man nicht alles, nur weil man für Gutenberg Noto Serif abschalten wollte…


Beitragsbild: Britta Kretschmer

Ein Gedanke zu „Wie lässt sich für Gutenberg Noto Serif abschalten?

  1. Besser geeignet wäre da eine Content Security Policy, die nur Content von der eigenen Domain zulässt. Wenn ich dort z.B. style-src: ‘self’ einstelle, bekomme ich in den Entwicklerwerkzeugen (Konsole) folgende Fehlermeldung angezeigt, sobald ich den Editor aufrufe:

    Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf https://fonts.googleapis.com/css?family=Noto+Serif%3A400%2C400i%2C700%2C700i&ver=5.0.2 blockiert (“style-src”).

    Somit werden zuverlässig alle (!) Google-Schriften geblockt, die sich im Core (oder Themes) “verstecken”.

    Falls noch nicht bekannt: Das kann in der .htaccess (Apache) definiert werden :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Nach oben scrollen