Schriften auf Websites – Seite 2: Schriften selbst hosten
Lesezeit: ca. 26 min für den gesamten Beitrag
Schritt 2 – Schriften herunterladen
Nun verlässt du die Google Fonts Website und rufst im Browser die Seite › Google Webfonts Helper auf. In der linken Seitenleiste kannst du durch alle 1571 Schriften scrollen. Sinnvoller und schneller geht es jedoch, wenn du oben in das Suchfeld direkt den zuvor notierten Schriftnamen eingibst. Entweder öffnet sich dann direkt die Seite mit deiner Schrift oder du siehst eine Liste mit deren möglichen Unterarten.
Nachdem du auf die gewünschten Schrift geklickt hast, öffnet sich die eigentliche Download-Seite. Oben siehst du 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, so dass weitere Korrekturen nicht mehr notwendig sind.
Vorbereitung des Downloads
Als erstes setzt du einen Haken bei den Alphabeten, die du benötigst. Latein (latin) ist voreingestellt und dürfte für deutsche Websites im Allgemeinen auch ausreichen.
Unter Punkt 2. siehst du wieder die dir 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 700 (fett) und eventuell auch bei kursiv (italic) sowie 700italic zu setzen. Damit dürftest du die Inhalte auf fast jeder Website gestalten können.
Welche Zwischenstufen zusätzlich sinnvoll sind, hängt maßgeblich von der Gestaltung der jeweiligen Schrift ab. Sind die Zeichen beispielsweise bei „normal“ schon recht dünn, solltest du keine noch leichtere Stufe wählen. Ähnliches gilt für normal(erweise) schon recht kräftige Zeichen, die dann nicht noch wesentlich fetter eingesetzt werden sollten.
Geeignete Schriftstärke wählen
Sehr dünne Zeichen sind für Fließtext weniger geeignet, da sie insbesondere bei geringer Größe und auf kleinen Bildschirm schlecht lesbar sind. Sehr fette sollten nur für Überschriften verwendet werden, da die einzelnen Wörter dadurch sehr breit werden, mehr Platz in der Zeile benötigen und bei längeren Sätzen sehr aggressiv wirken.
CSS Code erstellen
Zunächst hast du die Wahl zwischen Modern Browsers, Legacy Support (veraltete Unterstützung) und Historic Support (historische Unterstützung) – siehe hierzu auch die Abbildung unten: CSS-Codes, oberer Teil. Der Unterschied besteht in der Art und Anzahl der Fonts Formate, in denen die Schriften bereitgestellt werden.
- 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.
- eot (Embedded OpenType = eingebettetes …): Für Microsoft entworfenes Format, dass nur vom Internet Explorer 6 bis 8 unterstützt wird.
- 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ürde für eine Website das woff2-Format (evtl. plus woff-Format), also die Einstellung für moderne Browser genügen. Da aber manche Besucher immer noch veraltete Browser-Versionen nutzen oder um sicherzustellen, dass die Schriften auch auf allen Geräten funktionieren, könntest du dich auch für eine der beiden anderen Optionen entscheiden (s. Abb. unten „CSS-Code für Schriften“)
Im Kasten unter den Auswahl-Buttons erscheint nun dein CSS-Code. Diesen kopierst du, öffnest den Text-Editor (nicht Word/Pages) auf deinem PC, fügst den Code dort ein und speicherst die Datei zunächst erst einmal ab. Verändere nichts daran, denn den Code wirst du später noch benötigen.
Datei-Pfad korrekt einfügen
Zwar hast du die Möglichkeit schon vor dem Kopieren den Pfad, über den auf den Ordner zugegriffen werden kann, anzupassen. Jedoch empfiehlt es sich, dies erst später in deiner CSS-Datei zu tun, nachdem du den Ordner für deine Schriften erstellt hast und weißt, wie dieser „erreicht“ wird.
Fonts-Datei speichern
Abschließend findest du unter Punkt 4. den Download-Button. Darüber kannst du noch einmal kontrollieren, ob die von dir eingestellte(n) Sprache(n), Schriftstärke(n) und Formate vorhanden sind. Falls etwas fehlt, kannst du dies noch ändern, musst dann jedoch den CSS-Code erneut kopieren und speichern.
Wenn alles in Ordnung ist, lädst du deinen Font als zip-Datei herunter und speicherst diese auf deinem Desktop. Dort entpackst du die Datei und erhältst einen Ordner, der alle Schriftstärken in allen Formaten als Einzeldateien enthält. Verändere nichts an dem Ordner oder den Dateien, damit später alle Schriften auch ordnungsgemäß funktionieren.
Nun verlässt du Google, denn die weiteren Schritte finden auf deinem Server statt.
Schritt 3 – Installieren
Zunächst musst du einen Zugang zur serverseitigen Installation deiner Website herstellen. Die jeweils notwendigen Login-Daten erhältst du von deinem Hoster. Je nach Hosting-Paket bzw. -Anbieter hast du unterschiedliche Möglichkeiten.
- Direkter Zugang z. B. über das Dashboard bei deinem Anbieter oder ein Verwaltungssystem wie Plesk,
- über einen (S)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 dir dieser Weg i. d. R. nur bei einem höherwertigen 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 gar nicht möglich sind.
Child-Theme
Sobald du größere Änderung an der Programmierung deines Themes vornehmen möchtest, solltest du ein Child-Theme installieren. Um eine andere Schrift zu verwenden, musst du Codes in der CSS- und u. U. in der PHP-Datei hinzufügen. Wenn du dies in den Dateien des Haupt-Themes tust, 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 du bei Problemen jederzeit mit einem Klick wieder zum Haupt-Theme wechseln kannst, ohne dass deine Website als solche Schaden nimmt. Der Nachteil einer evtl. 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 du es auf deinen PC als zip-Datei heruntergeladen hast (nicht entpacken!), öffnest du dein WP-CMS.
- Design > Themes
- links oben auf den Button Theme hinzufügen klicken
- Theme hochladen
- Datei von deinem PC auswählen
- Jetzt installieren
Anschließend passt du ggf. die Dateien des Child-Themes über deinen Server-Zugang entsprechend der Anweisung des Entwicklers noch an, öffnest die Theme-Übersicht und aktivierst das Child-Theme. Zunächst wirst du auf deiner Website keinen Unterschied erkennen.
Falls der Entwickler deines Themes kein Child-Theme zur Verfügung stellt, musst du die zugehörigen Dateien selbst erstellen. Eine Anleitung dazu findest du beispielsweise auf der Website › Designers Inn.
Haupt-Theme nicht löschen!
Nachdem du dein Child-Theme aktiviert hast, wird dein Haupt-Theme nicht mehr als aktiv angezeigt. Es muss jedoch weiterhin in deiner Theme-Bibliothek verbleiben, da das Child-Theme die Grundprogrammierung des „Mutter-Themes“ übernimmt und lediglich einzelne Codes hinzufügt oder überschreibt. Ein Child-Theme ist kein eigenständiges Theme!
Schriften hochladen
Nachdem du den Zugang zu deinem Server hergestellt hast, öffnest du den Datei-Manager und gehst zu httpdocs. Dort siehst du alle Dateien deiner WordPress-Installation. Je nach Zugangs-Methode können die ersten beiden Schritte auch entfallen. Dann klickst du auf
- wp-content
- themes
- „theme“_child
Dort legst du einen neuen Ordner an, den du am besten fonts nennst. Zwar könntest du auch jeden beliebigen anderen Namen wählen, jedoch vereinfacht diese Bezeichnung später die Verknüpfung. Anschließend öffnest du den neuen Ordner und lädst alle Schrift-Dateien einzeln aus dem zuvor entpackten Fonts-Ordner (s. Fonts-Datei speichern) von deinem PC in diesen Ordner hoch.
Schritt 4 – CSS und PHP
Wenn der Upload abgeschlossen ist, kehrst du wieder in deinen …–child-Ordner zurück und öffnest nun die Datei style.css. Bis auf einen Eintrag zum Theme selbst, den du bitte weder löschst noch veränderst, dürfte die Datei leer sein.
Kopiere nun die CSS-Codes aus deinem Text-Editor. Klick in der style.css-Datei in eine leer Zeile (evtl. eine Zeile darüber frei lassen) und füge den kompletten Code dort ein. Kontrolliere nun den Datei-Pfad in der Klammer hinter jeder url-Zeile. Falls du deinen Ordner zuvor „fonts“ genannt hast, sollte der Pfad einfach mit ‚../fonts/ … beginnen. Solltest du eine andere Bezeichnung gewählt haben, musst du diese jeweils anstelle von „fonts“ einsetzen.
Font Display Regel
Um ein verzögertes Laden der neuen Schriften zu vermeiden, fügst du für jeden Schriftstil über den Quell-Angaben (src:) noch die Code-Zeile font-display: swap; ein (s. Abbildung oben, weiße Schrift mit kleinen Buchstaben).
Fallback-Schriften
Anschließend bestimmst du, wofür diese Font-Familie verwendet werden soll. Dafür fügst du unterhalb der Fonts weitere Code-Zeilen ein. Auch wenn du einen Font gewählt hast, der in deinem Customizer enthalten ist und den du auch dort auswählen könntest, solltest du zur Sicherheit trotzdem den Code verwenden. Denn hiermit legst du nicht nur deine primäre Schrift fest, sondern bestimmst auch die Fallback-Schriften.
Falls dein 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 deinen neuen Font als Standard festzulegen, musst du in manchen Fällen noch einen kleinen Eintrag in der functions.php-Datei deines Child-Themes vornehmen. Auch hier änderst du bitte nichts am Eintrag zu Beginn der Datei. Klick wieder in die darauf folgende leere Zeile und füge den Code (Abbildung dazu im Tutorial) ein. Sowohl beim CSS- als auch beim php-Code ersetzt du natürlich jeweils den Namen ‚Roboto‘ aus dem Beispiel durch den deiner Schriften-Familie.
Leider „vertragen“ nicht alle Server eine Änderung der php-Datei. Wenn du ein gutes Theme wie z. B. GeneratePress verwendest, kannst du 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 dir bei den vorangehenden Schritten kein Fehler unterlaufen ist, sollten die Texte auf deiner Website jetzt in den neuen Schriften angezeigt werden. Öffne nun den Customizer deines Themes und passe dort unter Typographie ggf. die Einstellungen für einzelne Textbereiche wie Überschriften an. Falls du Schriften verwendest, die in der dortigen Liste verzeichnet sind, werden diese jedoch auch weiterhin direkt von Google geladen. Deine Website ist also trotz des „Aufwands“ immer noch nicht DSGVO-konform.
Um diese Verbindung sicher auszuschließen, gibt es zwar spezielle WP-Plugins, die einfachste und sicherste Lösung ist jedoch, das WP-Plugin › Autoptimize von Frank Goossens zu installieren. Einerseits kannst du damit die Ladezeit / Performance deiner Website insgesamt durch eine Minimierung des Codes verbessern. Andererseits findest du in den Einstellungen des Plugins unter Extras den Punkt Google Fonts entfernen. Diesen Punkt aktivierst du.
In deinem Customizer wird sich nichts verändern, jedoch wird keine Verbindung zu Google mehr aufgebaut. Bei manchen Themes hast du inzwischen auch die Möglichkeit, im Customizer selbst Google Fonts zu deaktivieren. Jedoch ist die zuvor genannte Methode die zuverlässigere.
Erfolgskontrolle
Wenn du überprüfen möchtest, ob die Verknüpfung mit Google tatsächlich entfernt wurde, rufst du im Browser deine Website auf. Anschließend gehst du im Menü des Browsers auf Entwicklerwerkzeuge. Es erscheint rechts oder unterhalb deiner Website eine neue Übersicht. Klick nun im dortigen Menü auf Sources (Quellen) und schaue dir die „Wolken“ in der linke Seitenleiste an. Nachdem du Google Fonts deaktiviert hast, müssten 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 deine Schriften oder irgendwelche anderen Fonts auf deiner Website (noch) von Google bzw. Adobe Servern abgerufen. Um welche Schriften es sich handelt, erfährst du, wenn du auf die Wolken klickst. Sollten deine neuen Schriften genannt sein, überprüfe nochmals alle zuvor genannten Schritte.
Sind dir die Schriften unbekannt, müsstest du in deinem CMS suchen, wofür sie verwendet werden und sie ggf. auf deine oder eine Standard-Schrift umstellen. Leider werden insbesondere bei Baukästen der Hoster oder bei Page Buildern u. U. irgendwo auch weiterhin externe Fonts eingesetzt, die du nur sehr mühsam aufspüren und kaum ersetzen kannst. Dann hilft nur, auf solche Baukasten-Systeme zu verzichten.
Zur letzten Sicherheit kannst du deine 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.
Google Fonts sind zwar in vielen Themes und Vorlagen voreingestellt und mit einem Klick nutzbar, verursachen aber u. a. auch ein Problem mit dem Datenschutz. Da sie von Google Servern geladen werden, findet ein Transfer zumindest der IP-Adresse der Besucher deiner Website in ein Nicht-EU-Land statt. Dies ist gemäß DSGVO ohne die Begründung des besonderen Interesses (das hinsichtlich der Schriften kaum geltend gemacht werden kann, da es DSGVO-konforme Alternativen gibt) sehr problematisch.
Um Google Fonts oder andere individuelle Schriften verwenden zu können, solltest du sie immer selbst auf dem Server deiner Website hosten. Dies ist leider nicht bei allen Hosting-Anbietern bzw. -Paketen möglich. In diesen Fällen müsstest du dann doch auf die sogenannten Standard-Schriften zurückgreifen. Falls du jedoch die Möglichkeit zum Selbst-Hosten hast, tue es.
Auf den ersten Blick erscheint dieser Weg etwas kompliziert. Wenn du zumindest rudimentäre Programmierkenntnisse hast und genau der Schritt-für-Schritt Anleitung folgst, kann eigentlich nichts schief gehen. Auch brauchst du die Grund-Einrichtung nur einmal durchzuführen. Auf jeden Fall wirkt deine Website mit „eigenen“ Schriften individueller und professioneller.
Möchtest du später die Schriften wechseln oder neue hinzufügen, wiederholst du die Schritte 2 bis 4, löschst ggf. die alten Dateien und ersetzt die alten Codes der Schriften sowie den Schrift-Namen im Stylesheet (und ggf. in der php-Datei) durch die/den neuen.
Fazit
Falls du dir unsicher bist oder gar nicht zurecht kommst, frage einen Webdesigner. Google Schriften einfach so zu übernehmen, wie sie in deinem Theme oder deiner Vorlage angeboten werden, ist jedenfalls nach der aktuellen Rechtsauffassung keine gute Option.
© eb | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.
