Schriften auf Websites | In 5 Schritten DSGVO-konform

Schriften auf Websites – Teil 2: Schriften selbst hosten

Schritt 2 – Schriften herunterladen

Nun verlassen Sie die Google Fonts Website und rufen im Browser die Seite › Google Webfonts Helper auf. In der linken Seitenleiste können Sie durch alle 1400 Schriften scrollen. Sinnvoller und schneller geht es jedoch, wenn Sie oben in das Suchfeld direkt den zuvor notierten Namen eingeben. Entweder öffnet sich dann direkt die Seite mit Ihrer Schrift oder Sie sehen die Liste der möglichen Unterarten Ihrer Schrift.

Nachdem Sie auf die gewünschten Schrift geklickt haben, öffnet sich die eigentliche Download-Seite. Oben sehen Sie einige Informationen über die Schrift wie die Anzahl der Stile und Codierungen für bestimmte Sprachen (Charsets), die Popularität sowie wann die Schrift zuletzt modifiziert wurde. Falls die letzte Überarbeitung schon sehr lange zurückliegt, kann das bedeuten, dass die Schrift nicht mehr gepflegt wird und etwaige Fehler nicht mehr korrigiert werden. Jedoch kann sich die Schrift auch einfach so bewährt haben, wie sie ist und weitere Korrekturen sind nicht mehr notwendig.

Vorbereitung des Downloads

Als erstes setzen Sie einen Haken bei den Alphabeten, die Sie benötigen. Latein (latin) ist voreingestellt und dürfte für deutsche Websites im Allgemeinen auch ausreichen.

Unter Punkt 2. sehen Sie wieder die Ihnen schon von der Auswahl bei Google Fonts bekannte Liste der verfügbaren Stile. Da in den meisten Fällen der Schriftstil normal (regular) die Basis für Texte bildet, ist dieser bereits markiert. Darüber hinaus ist es sinnvoll, zumindest einen Haken bei kursiv (italic) und eventuell auch bei 700 (fett) plus 700italic zu setzen. Damit dürften Sie die Inhalte auf fast jeder Website gestalten können.

CSS Code erstellen

Zunächst haben Sie die Wahl zwischen Beste Unterstützung (Best Support) und Moderne Browser (Modern Browsers). Der Unterschied besteht in der Art und Anzahl der Formate, in denen die Schriften bereitgestellt werden.

• eot (Embedded OpenType = eingebettetes …): Für Microsoft entworfenes Format, dass nur vom Internet Explorer 6 bis 8 unterstützt wird.
• woff, woff2 (Web Open Font Format = Offenes Schriftformat für das Internet): Durch die Komprimierung ist die Ladezeit der Schriften deutlich verkürzt und es ist für moderne bzw. super moderne Browser das Format der Wahl.
• ttf (truetype format = echte Schrift): Dies ist das Standard-Format für die Schriftdarstellung auf PCs und Druckern und wird von Safari, iOS und Android unterstützt.
• svg (Scalable Vector Graphics = skalierbare Vektorgrafiken): Es handelt sich um eine neue Version des OpenType-Formats in das wesentlich mehr Informationen eingebettet sind, was sich in der Datei-Größe bemerkbar macht.

Eigentlich würden für eine Website die beiden woff-Formate, also die Einstellung für moderne Browser genügen. Da aber manche Besucher immer noch veraltete Browser-Versionen nutzen und um sicherzustellen, dass die Schriften auch auf allen Geräten funktionieren, sind Sie mit beste Unterstützung auf der sicheren Seite.

Im Kasten unter den Auswahl-Buttons erscheint nun Ihr CSS-Code. Diesen kopieren Sie, öffnen den Text-Editor (nicht Word/Pages) auf Ihrem PC, fügen ihn dort ein und speichern die Datei zunächst erst einmal ab. Verändern Sie nichts daran, denn den Code werden Sie später noch benötigen.

Fonts-Datei speichern

Abschließend finden Sie unter Punkt 4. den Download-Button. Darüber können Sie noch einmal kontrollieren, ob die von Ihnen eingestellte(n) Sprache(n), Schriftstärke(n) und Formate vorhanden sind. Falls etwas fehlt, können Sie dies noch ändern, müssen jedoch den CSS-Code erneut kopieren und speichern.

Wenn alles in Ordnung ist, laden Sie Ihren Font als zip-Datei herunter und speichern Sie sie auf Ihrem Desktop. Dort entpacken Sie die Datei und erhalten einen Ordner, der alle Schriftstärken in allen Formaten als Einzeldateien enthält. Verändern Sie nichts an dem Ordner oder den Dateien, damit später alle Schriften auch ordnungsgemäß funktionieren.

Nun können Sie Google verlassen, denn die weiteren Schritte finden auf Ihrem Server statt.

Schritt 3 – Installieren

Zunächst müssen Sie einen Zugang zur serverseitigen Installation Ihrer Website herstellen. Die jeweils notwendigen Login-Daten erhalten Sie von Ihrem Hoster. Je nach Hosting-Paket bzw. -Anbieter haben Sie unterschiedliche Möglichkeiten.

• Direkter Zugang z. B. über ein Verwaltungssystem wie Plesk,
• über einen FTP-Client wie Cyberduck oder Filezilla oder
• mittels der Installation eines Datei-Manager-Plugins wie z. B. Advanced File Manager im WP-CMS.

Am einfachsten gestaltet sich das Arbeiten mit Plesk, jedoch steht Ihnen dieser Weg i. d. R. nur bei einem höhererwertigen Hosting (z. B. Managed Hosting) offen. Aber auch mit einem FTP-Client kommen die meisten Nutzer recht gut zurecht. Die dritte Variante empfiehlt sich meiner Meinung nach nur, wenn die beiden anderen nicht möglich sind.

Child-Theme

Sobald Sie größere Änderung an der Programmierung Ihres Themes vornehmen möchten, sollten Sie ein Child-Theme installieren. Um eine andere Schrift zu verwenden, müssen Sie Codes in der CSS- und der PHP-Datei hinzufügen. Wenn Sie dies in den Dateien des Haupt-Themes tun, werden diese jedoch beim nächsten Theme-Update wieder überschrieben. Der Vorteil eines Child-Themes ist, dass sich dessen Einträge bei einem Theme-Update nicht verändern und Sie bei Problemen jederzeit mit einem Klick wieder zum Haupt-Theme wechseln können, ohne dass Ihre Website als solche Schaden nimmt. Der Nachteil einer längeren Ladezeit aufgrund der zusätzlichen Dateien, ist im Falle der Schriften zu vernachlässigen.

Viele Theme-Entwickler bieten auf ihrer Website bereits den Download eines passenden Child-Themes an und erklären, was zu beachten ist. Nachdem Sie es auf Ihren PC als zip-Datei heruntergeladen haben (nicht entpacken!), öffnen Sie Ihr WP-CMS.

1. Design > Themes
2. links oben auf den Button Theme hinzufügen klicken
3. Theme hochladen
4. Datei von Ihrem PC auswählen
5. Jetzt installieren

Anschließend passen Sie ggf. die Dateien des Child-Themes über Ihren Server-Zugang entsprechend der Anweisung des Entwicklers noch an, öffnen Ihre Theme-Übersicht und aktivieren das Child-Theme. Zunächst werden Sie auf Ihrer Website keinen Unterschied erkennen.

Falls der Entwickler Ihres Themes kein Child-Theme zur Verfügung stellt, müssen Sie die zugehörigen Dateien selbst erstellen. Eine Anleitung dazu finden Sie beispielsweise auf der Website › Designers Inn.

Schriften hochladen

Nachdem Sie den Zugang zu Ihrem Server hergestellt haben, öffnen Sie den Datei-Manager und gehen zu httpdocs. Dort sehen Sie alle Dateien Ihrer WordPress-Installation. Je nach Zugangs-Methode können die ersten beiden Schritte auch entfallen. Dann klicken Sie auf

1. wp-content
2. themes
3. „theme“_child

Dort legen Sie einen neuen Ordner an, den Sie am besten fonts nennen. Zwar könnten Sie auch jeden beliebigen anderen Namen wählen, jedoch vereinfacht diese Bezeichnung später die Verknüpfung. Anschließend öffnen Sie den neuen Ordner und laden alle Schrift-Dateien einzeln aus dem zuvor entpackten Fonts-Ordner (s. Fonts-Datei speichern) von Ihrem PC in diesen Ordner hoch.

Schritt 4 – CSS und PHP

Wenn der Upload abgeschlossen ist, kehren Sie wieder in Ihren …–child-Ordner zurück und öffnen nun die Datei style.css. Bis auf einen Eintrag zum Theme selbst, den Sie bitte weder löschen noch verändern, dürfte die Datei leer sein.

Kopieren Sie nun die CSS-Codes aus Ihrem Text-Editor. Klicken Sie in der style.css-Datei in eine leer Zeile (evtl. eine Zeile frei lassen) und fügen Sie den kompletten Code dort ein. Kontrollieren Sie nun den Datei-Pfad in der Klammer hinter jeder url-Zeile. Falls Sie Ihren Ordner zuvor „fonts“ genannt haben, sollte der Pfad einfach mit ‚fonts/ … beginnen. Sollten Sie eine andere Bezeichnung gewählt haben, müssen Sie diese anstelle von „fonts“ einsetzen.

Fallback-Schriften

Anschließend bestimmen Sie, wofür diese Font-Familie verwendet werden soll. Dafür fügen Sie unterhalb der Fonts weitere Code-Zeilen (s. Abbildung oberer Teil) ein. Auch wenn Sie einen Font gewählt haben, der in Ihrem Customizer enthalten ist und den Sie auch dort auswählen könnten, sollten Sie zur Sicherheit trotzdem den Code verwenden. Denn hiermit legen Sie nicht nur Ihre primäre Schrift fest, sondern bestimmen auch die Fallback-Schriften.

Falls Ihr Font aus irgendeinem Grund nicht geladen werden kann, wird der Text (je nach Browser/System) in einer der beiden anderen Schriften bzw. einer Schrift desselben Typs (z. B. sans-serif) angezeigt und verschwindet nicht ganz. Als Rückfall-Schriften für sans-serif eigenen sich Arial/Trebuchet MS/Verdana sowie Helvetica, für serif Times/Times New Roman sowie Georgia.

PHP

Um Ihren neuen Font als Standard festzulegen, müssen Sie nun noch einen kleinen Eintrag in der functions.php-Datei Ihres Child-Themes vornehmen. Auch hier ändern Sie bitte nichts am Eintrag zu Beginn der Datei. Klicken Sie wieder in die darauf folgende leere Zeile und fügen Sie den Code (s. Abbildung unterer Teil) ein. Sowohl beim CSS- als auch beim PHP-Code ersetzen Sie natürlich jeweils den Namen ‚Roboto‘ aus dem Beispiel durch den Ihrer Schriften-Familie.

Leider „vertragen“ nicht alle Server eine Änderung der php-Datei. Wenn Sie ein gutes Theme wie z. B. GeneratePress verwenden, können Sie diese Einstellung auch im Customizer vornehmen, ohne dass die Fonts anschließend wieder von Google Servern geladen werden.

Schritt 5 – Verbindung zu Google kappen

Sofern Ihnen bei den vorangehenden Schritten kein Fehler unterlaufen ist, sollten die Texte auf Ihrer Website jetzt in den neuen Schriften angezeigt werden. Öffnen Sie nun den Customizer Ihres Themes und passen Sie dort unter Typography ggf. die Einstellungen für einzelne Textbereiche wie Überschriften an. Falls Sie Schriften verwenden, die in der dortigen Liste verzeichnet sind, werden diese jedoch auch weiterhin direkt von Google geladen. Ihre Website ist also trotz des „Aufwands“ immer noch nicht DSGVO-konform.

Um diese Verbindung sicher auszuschließen, ist die einfachste und zuverlässigte Lösung das WP-Plugin › Autoptimize von Frank Gossens zu installieren. Einerseits können Sie damit die Ladezeit / Performance Ihrer Website insgesamt durch eine Minimierung des Codes verbessern. Andererseits finden Sie in den Einstellungen des Plugins unter Extras den Punkt Google Fonts entfernen. Diesen Punkt aktivieren Sie.

In Ihrem Customizer wird sich nichts verändern, jedoch wird keine Verbindung zu Google mehr aufgebaut. Bei manchen Themes haben Sie auch die Möglichkeit, im Customizer selbst Google Fonts zu deaktivieren. Jedoch ist die zuvor genannte Methode die zuverlässigere.

Erfolgskontrolle

Falls Sie überprüfen möchten, ob die Verknüpfung mit Google tatsächlich entfernt wurde, rufen Sie im Browser Ihre Website auf. Anschließend gehen Sie im Menü des Browsers auf Entwicklerwerkzeuge. Es erscheint rechts oder unterhalb Ihrer Website eine neue Übersicht. Klicken Sie nun im dortigen Menü auf Sources (Quellen) und schauen Sie sich die „Wolken“ in der linke Seitenleiste an. Nachdem Sie Google Fonts deaktiviert haben, müssen die beiden unten genannten Verknüpfungen aus der Liste verschwunden sein.

Falls die Liste jedoch „Wolken“ beispielsweise mit den Bezeichnungen fonts.googleapis.com, fonts-gestatic.com und/oder URLs mit der Bezeichnung Typekit (Adobe Fonts) enthält, werden Ihre Schriften oder irgendwelche anderen Fonts auf Ihrer Website (noch) von Google Servern abgerufen. Um welche Schriften es sich handelt, erfahren Sie, wenn Sie auf die erste der beiden Wolken klicken. Sollten Ihre neuen Schriften genannt sein, überprüfen Sie nochmals alle zuvor genannten Schritte. Sind Ihnen die Schriften unbekannt, müssen Sie in Ihrem CMS suchen, wofür sie verwendet werden und sie ggf. auf Ihre oder eine Standard-Schrift umstellen.

Zur letzten Sicherheit können Sie Ihre Domain-URL auch auf speziellen Websites wie z. B. › eRecht24 Font Scanner testen.

Schriften auf Websites – Zusammenfassung

Websichere oder Standard-Schriften sind langweilig – „eigene“ Fonts sind schöner und insbesondere Google Fonts sind meistens „eh da“. Im Prinzip ist das richtig, wenn es auch nicht ganz so einfach ist, wie es sich anhört.

Um Google Fonts oder andere individuelle Schriften verwenden zu können, müssen Sie sie selbst auf dem Server Ihrer Website hosten. Dies ist leider nicht bei allen Hosting-Anbietern bzw. -Paketen möglich. In diesen Fällen müssten Sie dann doch auf die sogenannten Standard-Schriften zurückgreifen. Falls Sie jedoch die Möglichkeit zum Selbst-Hosten haben, tun Sie es.

Auf den ersten Blick erscheint dieser Weg etwas kompliziert. Wenn Sie zumindest rudimentäre Programmierkenntnisse haben und genau der Schritt-für-Schritt Anleitung folgen, kann eigentlich nichts schief gehen. Auch brauchen Sie die Grund-Einrichtung nur einmal durchzuführen. Auf jeden Fall wirkt Ihre Website mit „eigenen“ Schriften individueller und professioneller.

Möchten Sie später die Schriften wechseln oder neue hinzufügen, wiederholen Sie die Schritte 2 bis 4, löschen ggf. die alten Dateien und ersetzen die alten Codes der Schriften sowie den Schrift-Namen im Stylesheet und der php-Datei durch die/den neuen.

Falls Sie sich unsicher sind oder gar nicht zurecht kommen, fragen Sie einen Webdesigner. Google Schriften einfach so zu übernehmen, wie Sie in Ihrem Theme oder Ihrer Vorlage angeboten werden, ist jedenfalls nach der aktuellen Rechtsauffassung keine Option.

Fazit

Google Fonts sind zwar in vielen Themes und Vorlagen voreingestellt und mit einem Klick nutzbar, verursachen aber ein Problem mit dem Datenschutz. Da sie von Google Servern geladen werden, findet ein Transfer der IP-Adresse der Besucher Ihrer Website in ein Nicht-EU-Land statt. Dies ist gemäß DSGVO nicht erlaubt.

Abbildungen © eb, Google LLC | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.