
Apples Safari-Browser ist nicht jedermanns Sache, ich nutze ihn allerdings viel und gerne. Jetzt habe ich Tutonaut.de auf eine neue, lokal gehostete Schriftart umgestellt: Inter – ein wirklich gut gemachter Ersatz für das kostenpflichtige Helvetica. Und obendrein Open Source. Einzig: In Safari sah die neue Schriftart, gelinde gesagt, Kacke aus.
Der Gegencheck mit anderen Browsern wie Chrome, Edge und Firefox zeigte, dass das Rendering-Problem der Schrift kein Problem der Schriftart an sich ist. Hier sah die Schrift aus, wie sie aussehen sollte (nämlich elegant). Während sie auf Safari aussah, als hätte ein Vorschulkind alle Worte in Überschriften mit einem dicken Edding nachgezeichnet. Das Rendering von gefetteten Schriften sah einfach furchtbar aus. Schön ist das nicht.
Gut möglich, dass neben Safari auch andere, weniger verbreitete Browser auf WebKit-Basis betroffen sind. Das habe ich nicht getestet. Zumal der Fehler auch in der mobilen Safari-Version auftritt, inklusive aller damit verbundenen optischen Nachteile auf iPhone und iPad. Und anders als MacOS hat Safari auf Smartphones eine signifikante Verbreitung. Das Problem ist weithin bekannt und füllt seitenweise Foren, meist ohne sinnvolle Lösung.

Safari rendert, wo es nicht rendern soll
Ursache für dieses Verhalten ist anscheinend Safaris Umgang mit Schriftarten: Irgendwas wird da gerendert, was nicht gerendert werden soll. Ich bin zwar kein Webdesign-Crack, doch das äußerst ärgerliche und optisch so lästige Problem hängt offenbar mit der Font-Synthesis-Anweisung in CSS zusammen, die Safari entweder falsch oder sehr eigensinnig interpretiert. Verschiedene Lösungen – etwa in Form von CSS-Weichen oder anderen Hacks aus den Tiefen von Stackoverflow und Co. – brachten keine Besserung.
Was tun, wenn die Schrift der Website in Safari komisch aussieht?
Was also tun gegen dieses seltsame Safari-Verhalten? Apple wird diesbezüglich vielleicht irgendwann etwas unternehmen, bis dahin können betroffene User, nunja: Nichts tun.
Betroffene Website-Betreiber aber sehr wohl: Es gilt, Safari per CSS anzuweisen, dieses kuriose Font-Rendering zu unterlassen. Und hierfür reicht – man glaubt es kaum – ein kleiner Schnipsel CSS-Code, den Ihr unter WordPress per Customizer oder im CSS-Feld Eures Themes unterbringen könnt:
* {
font-synthesis: none !important;
}
Das war es auch schon: Nach dem Löschen der Caches sieht Tutonaut in Safari aus, wie die Seite aussehen soll. Die Schriftart Inter wird korrekt dargestellt und damit ist das Problem aus meiner Sicht behoben.
Vorteil dieser Lösung ist zudem, dass allen Browsern untersagt wird, Fonts zu synthetisieren, sprich: Wenn neben Safari noch andere Browser so eingestellt sind, Schriften seltsam zu rendern, wird das mit diesem kurzen Code-Schnipsel nachhaltig behoben.