Schriften auf Websites | In 5 Schritten DSGVO-konform

Webdesign

Bloggen ··· Design ··· Google ··· Recht

Schriften auf Websites

Was ist bei der Wahl der Schriften für Websites zu beachten? Anleitung zur DSGVO-konformen Verwendung am Beispiel von von Google Fonts.

Inhaltsverzeichnis

Schriften – Vorbemerkungen

Schriften sind notwendig, um Texte überhaupt darstellen zu können. Auf jedem PC, Tablet oder Smartphone ist mindestens eine Schriftart vorinstalliert, die sogenannte Systemschrift. Darüber hinaus stehen Ihnen weitere Schriftarten (Fonts) zur Verfügung, die zum Teil ebenfalls systemtypisch sind. Am größten ist die Auswahl auf PCs mit den Betriebssystemen von Apple (macOS) und Microsoft (Windows), während auf Smartphones (iOS oder Android) nur sehr wenige Schriften angeboten werden. Außerdem ist es auf diesen Geräten nur sehr begrenzt möglich, die automatisch verwendete Schriftart durch eine andere zu ersetzen.

Da die systemspezifischen Schriften auf Geräten mit einem anderen Betriebssystem nicht darstellbar sind, werden sie in der Regel beim Aufrufen von externen Dokumenten durch eine „systemeigene“ ersetzt. Das hat zur Folge, dass sich unter Umständen Textzeilen verschieben und sich die ursprüngliche Gestaltung eines Dokuments verändert. Um eine systemübergreifend gleiche Darstellung zu erreichen, können Sie eine der (fast) überall darstellbaren Standardschriften (s. Standard-Schriften) nutzen oder externe Schriften installieren.

Tipp 1
Für Ihre (eigenen) Dokumente können Sie jede beliebige Schrift benutzen. Denken Sie aber daran, dass systemspezifische Schriften wie Segoe UI (Windows) oder Helvetica (Apple) auf anderen Systemen ersetzt werden und das Dokument u. U. anders aussieht.

Schrifttypen

Einerseits unterscheiden sich Schriften nicht nur in der Höhe, Breite und Stärke der einzelnen Zeichen sowie deren Abstand zueinander, sondern auch in deren Basis-Gestaltung. Dementsprechend werden Sie in fünf Familien (Schrifttypen) unterteilt:

  • Serif: Schriften mit kleinen Querstrichen oder Schnörkeln an den Enden der Zeichen.
  • Sans Serif: Schriften ohne Serifen.
  • Display Fonts: Große, meist fett gestaltete Zeichen.
  • Handwriting: Einer Handschrift nachempfundene, geschwungene Schriften.
  • Monospace: Nichtproportionale Schriften mit einer festen Zeichenbreite.

Zwar können Sie für Ihre Texte jede beliebige vom System/Programm angebotene Schrift auswählen, jedoch ist nicht jede Schriftart für jeden Zweck gleich gut geeignet. So werden Serifen-Schriften „auf Papier“ (Bücher, Zeitungen, etc.) als besser lesbar empfunden, wogegen sich im Internet Schriften ohne Serifen bewährt haben. Allerdings ist das kein Muss, sondern primär eine Frage der persönlichen Vorliebe.

Anders sieht das bei Display- und Handschriften aus. Diese sollten Sie nicht für längere Texte (Fließtext) verwenden, sondern nur sparsam und gezielt einsetzen. So eignet sich der Typ Display für auffällige Titel / Überschriften, Handschriften hingegen nur als Schmuckschrift für Titelblätter, besonders hervorgehobene Textzeilen, Zitate o. ä. Aufgrund Ihres gleichmäßigen und eindeutigen Schriftbilds finden Monospace-Schriften vor allem im Programmierbereich / (Text-)Editor Verwendung.

Tipp 2
Wählen Sie Schriften nicht ausschließlich nach Ihrer Vorliebe aus, sondern berücksichtigen Sie auch den Verwendungszweck sowie die Lesbarkeit. Die Wörter sollten den Leser weder permanent „anspringen“ noch nur mit einer Lupe zu entziffern sein.

Schriftstile

Der Begriff Schriftstil schließt sowohl die Neigung der Zeichen als auch die Schriftstärke ein. So gibt es Schriften, für die nur ein Stil zur Verfügung steht und andere, die als Paket mit normalen und kursiven (italic) Varianten angeboten werden. Außerdem sind in vielen Paketen auch unterschiedlich Schriftstärken enthalten. Diese sind in folgende CSS-Klassen unterteilt:

  • 100: Thin (fein)
  • 200: ExtraLight (extraleicht)
  • 300: Light (leicht)
  • 400: Regular (normal)
  • 500: Medium (medium, leichthalbfett)
  • 600: SemiBold (halbfett)
  • 700: Bold (fett)
  • 800: ExtraBold (extrafett, kräftig)
  • 900: Black (schwarz, ultrafett)

Zwar können Sie die Neigung bzw. Stärke der Zeichen auch in Ihrem Schreibprogramm ändern, indem Sie Wörter als kursiv (italic) oder fett (bold, strong) markieren. Allerdings ist das Ergebnis nicht unbedingt befriedigend bzw. die Anpassung wird manchmal nicht wirksam, sofern im Schrift-Paket keine kursiven oder fetten Varianten vorgesehen waren.

Schriften - Typen
links: Sans Serif, Serif, Display, Handwriting; rechts: Monospace (Screenshot: Google/eb)

Schriften auf Websites

Natürlich wird die Wahl der Schriftart(en) auf Websites ebenfalls vom persönlichen Geschmack bestimmt. Allerdings trägt die Schrift in diesem Fall noch mehr zum Gesamteindruck bei als bei anderen Dokumenten. Schriften werden somit nicht nur zur reinen Darstellung von Text eingesetzt, sondern sind auch ein Gestaltungselement – Stichwort Corporate Design. Aus diesem Grund ist bei Websites der Faktor der geräte-, system- und browser-übergreifend einheitlichen Darstellung noch wichtiger.

Außerdem soll bei eine Website sowohl der visuellen Gesamteindruck als auch der Aufbau immer gleich bleiben. Würden beispielsweise die bei der Erstellung verwendeten Schriften auf anderen Geräten durch kleinere, schmalere bzw. breitere, höhere ersetzt, könnten sich die darüber, daneben oder darunter befindlichen Elemente verschieben. Systemspezifische Schriften sind deshalb für Websites nicht geeignet, es sei denn, Sie würden Sie auf dem Server Ihrer Website installieren.

Tipp 3
Verwenden Sie Systemschriften auf Websites nur als Fallback (s. u.) oder wenn Sie sie selbst hosten (können).

Typografie – Font-Auswahl

Wahrscheinlich werden die meisten Websites heute auf der Grundlage von Themes oder vorgefertigten Vorlagen erstellt. Hierfür laden Sie die zugehörigen Dateien auf den Server, auf dem Sie Ihre Website hosten. Unter anderem ist in dem Paket auch eine Datei mit Icons und Fonts enthalten. Jedoch gibt es dabei einen Haken.

Diese Fonts werden nur für die Texte Ihres CMS bzw. die Beschreibungen der Theme-Optionen usw. verwendet. Dementsprechend sind es nicht die Schriften, die Ihnen später im Customizer (Verzeichnis der Anpassungswerkzeuge) bzw. in den Text-Modulen für das Design Ihrer Website angeboten werden. Einerseits finden Sie dort die Standard-Schriften oder zumindest einige. Solange Sie sich für eine dieser Schriften entscheiden, sind Sie auf der sicheren Seite, da die Schriften nicht von einem bestimmten Server geladen werden müssen. Andererseits sind sie für die Gestaltung einer Website weniger beliebt, da sie nicht besonders zur Individualität Ihrer Website beitragen und irgendwie langweilig sind.

Um einiges größer und für die individuelle Gestaltung interessanter ist das Angebot sonstiger Schriften der unterschiedlichsten Typen und Stile. Normalerweise handelt es sich um Google Fonts, die eben nicht auf Ihrem Server installiert sind, sondern jeweils beim Aufrufen der Website direkt von Google Servern geladen werden. Genau das führt auf in der EU betriebenen und/oder in der EU aufrufbaren Websites zu Problemen (s. Schriften und die DSGVO).

Tipp 4
Beachten Sie, dass die vom CMS angebotenen Schriften nur scheinbar vorinstalliert sind. Sie werden nicht von Ihrem, sondern von einem externen Server abgerufen.

Standard-Schriften

Um auf Nummer sicher zu gehen, können Sie sich für eine sogenannte websichere Standard-Schrift entscheiden, die zumindest auf vielen Geräten und in den neueren Browsern korrekt dargestellt wird. Die Auswahl ist jedoch recht begrenzt:

  • Mit Serifen: Georgia, Palatino und Times New Roman
  • Ohne Serifen: Arial (Arial Black, Arial Narrow), Trebuchet MS, Verdana sowie
  • mit Einschränkungen Lucida Sans Unicode (nur Windows) bzw. Lucida Grande (nur macOS) und Tahoma (nicht iOS).
  • Monospace: Courier New

Besitzer von Android-Geräten bleiben jedoch auch bei den Standard-Schriften außen vor.

Tipp 5
Mit Standard-Schriften können Sie auf Websites fast nichts falsch machen, aber eben nur fast. Leider sind einige heute auch nicht mehr mit allen Systemen kompatibel.

Externe Schriften

Als Alternative zu den bereits erwähnten Standard-Schriften können Sie entweder Schriften von Anbietern im Internet verwenden oder sich Ihre eigene Schrift gestalten (lassen). Letzteres dürfte wohl nur für größere Unternehmen in Frage kommen. Im Internet finden Sie eine Reihe von Anbieter, auf deren Websites Sie Fonts auswählen und herunterladen können. Manche bieten kostenlose Schriften an, andere nur kostenpflichtige oder beide Varianten. Einige bekannte Anbieter sind

Google Fonts | › Adobe Fonts | › FONTSQUIRREL | › fontspace

Alle Schriften sind auf den Servern der jeweiligen Anbieter gespeichert. Deshalb müssen Sie externe Schriften immer herunterladen, selbst auf Ihrem Server installieren und in das CMS einbinden. Am bekanntesten und beliebtesten sind Google Fonts. Zwar besteht die Möglichkeit, diese Schriften direkt vom Google Server abzurufen und nicht selbst zu installieren, aber das ist aktuell keine echte Option.

Unabhängig davon, für welchen Anbieter Sie sich entscheiden, besteht immer das Risiko, dass die Schriften plötzlich aus dem Programm genommen werden bzw. das Unternehmen verschwindet. Wenn Sie die Schriften jedoch bereits heruntergelden und selbst gehostet haben, entsteht dadurch i. d. R. kein wirklicher Schaden.

Tipp 6
Absolute Voraussetzung für das Hosten externer Schriften ist, dass Sie Zugriff auf die installierten Dateien auf Ihrem Server haben, diese bearbeiten und einen neuen Ordner anlegen können. Das ist jedoch nicht bei allen Hosting-Formen (uneingeschränkt) möglich.

Schriften und die DSGVO

Beim Aufrufen einer Website, auf der Google Fonts direkt von Google Servern geladen werden, wird die IP-Adresse der Besucher an Google (u. U. auch in die USA) übermittelt. Die IP-Adresse gehört jedoch zu den personenbezogenen Daten, deren Verarbeitung besonderen Vorschriften unterliegt. So muss der Betreiber sein berechtigtes Interesse an der Datenübertragung darlegen und die Besucher müssen aktiv dazu einwilligen. Jedoch gestaltet sich das bei Schriften schwierig, da sie bereits geladen werden, bevor eine Zustimmung der Website-Besucher überhaupt möglich ist.

Darüber hinaus ist ein Datentransfer in Nicht-EU-Länder generell nicht erlaubt und nach der aktuellen Rechtssprechung betrifft das auch die Verwendung von Google Fonts. Obwohl es in dem Verfahren nur um diese ging, ist das Ergebnis auch auf andere Schriften-Anbieter außerhalb der EU übertragbar, da die Grundlagen dieselben sind. Auch der Nachweis eines berechtigten Interesses ist kaum möglich, da Sie andere Schriften verwenden können, ohne dass eine Verbindung zu externen Servern hergestellt wird.

Tipp 7
Häufig nutzen Themes oder Vorlagen automatisch Google Fonts oder Sie können diese für die Gestaltung Ihrer Texte einfach auswählen. Deren Verwendung ist jedoch in der EU so nicht zulässig. Wechseln Sie zu einer Standard-Schrift oder hosten Sie die Schrift Ihrer Wahl selbst.

Schriften selbst hosten

Aufgrund der Problematik des Datentransfers müssen Sie, abgesehen von den Standard-Schriften, alle externen Schriften selbst hosten. Das bedeutet, dass Sie die Schriften auf dem Server installieren, auf dem Ihre Website liegt. Nur so können Sie sie rechtskonform auf Ihrer Website einsetzen.

Bevor Sie eine Schrift bei einem externen Anbieter auswählen und herunterladen, lesen Sie in jedem Fall die Lizenzbedingungen. So gibt es sowohl kostenlose als auch kostenpflichtige Fonts, die Sie frei verwenden dürfen. Andere dürfen Sie zwar für private Zwecke (auf Ihrem PC) nutzen, aber nicht kommerziell, also auch nicht auf einer öffentlichen Website.

Bei den folgenden Ausführungen dienen Google Fonts aufgrund ihrer Popularität als Beispiel. Das beschriebene Verfahren ist jedoch auch auf das Hosten von Schriften aus anderen Quellen übertragbar.

Tipp 8
Bevor Sie die nächsten Schritte befolgen, stellen Sie sicher, dass es Ihr Hosting-Paket / Hosting-Anbieter erlaubt, direkt auf die installierten Dateien zuzugreifen, neue hinzuzufügen sowie diese zu bearbeiten. Falls das nicht der Fall ist, können Sie nur Standard-Schriften verwenden.

Google Fonts

Der Vorteil von Google Fonts ist, das die Schriften kostenlos sind und auf öffentlichen Websites verwendet werden dürfen. Außerdem sind einige „beliebte“ Schriften in den Themes/Vorlagen bereits „vorhanden“ (s. Typografie – Font-Auswahl). Deshalb erscheinen zumindest einige von ihnen auf vielen Websites und die Internetnutzer haben sich inzwischen an die Schriftbilder gewöhnt. Normalerweise werden sie direkt von Google Servern abgerufen (s. Schriften und die DSGVO).

Allerdings gibt es auch Nachteile. Einerseits ist das Angebot so groß, dass die Entscheidung, welches nun die passende Schrift für einen bestimmten Zweck ist, schwer fällt. Andererseits sind nicht alle Schriften durchgehend sauber gestaltet, so dass zumindest einige nicht unbedingt als qualitativ hochwertig zu bezeichnen sind. So kommt es immer wieder vor, dass bei einem oder wenigen Zeichen Teile fehlen oder anders gestaltet sind. Leider fallen die „Schönheitsfehler“ nicht selten erst dann auf, wenn Sie sie bereits installiert haben und verwenden.

Tipp 9
Beziehen Sie auch die Typografie-Liste Ihres Themes in Ihre Überlegungen ein. Wenn eine Schrift dort bereits zur Auswahl steht, erleichtert das später die Verknüpfung mit Ihrer Website.

Wie viele Schriften sind notwendig?

Zunächst sollten Sie sich überlegen, für welchen Zweck Sie die Schrift/en einsetzen möchten. So können Sie die meisten, für Fließtext geeigneten Fonts auch für Überschriften verwenden. Andere, die als Überschrift gut aussehen würden, sind für den Fließtext zu fett oder breit. Auch sehr verspielte Schriften eignen sich höchstens für den Titel auf der Startseite, aber nicht als Zwischenüberschriften oder gar als Fließtext.

Falls Sie für Überschriften eine andere Schrift als für den Text in Erwägung ziehen, stellt sich die Frage, ob beide derselben Gruppe (s. Schrifttypen) angehören sollen oder nicht. Mehr als zwei Fonts / Schriftarten sind normalerweise weder notwendig noch empfehlenswert. Nicht alle Schriften harmonieren miteinander. Einerseits sollten sie sich nicht zu sehr ähneln, andererseits sollte aber die zweite Schrift auch nicht zu „exotisch“ sein.

Schriften - Suche bei Google Fonts
Google Fonts Startseite (Screenshot: Google/eb)

Schritt 1 – Suche nach Schriften

Nachdem Sie die Google Fonts Website aufgerufen haben, können Sie im oberen Bereich gezielt nach einem bestimmten Font suchen sowie den vorgegebenen Beispielsatz durch einen eigenen ersetzen. Es wäre von Vorteil, wenn dieser möglichst viele Buchstaben des Alphabets Ihrer Sprache enthielte. Im Deutschen sollten Sie auch Umlaute und „ß“ berücksichtigen. Rechts können Sie noch die Schriftgröße festlegen, in der der Text für die unterschiedlichen Fonts angezeigt wird.

In der Zeile darunter haben Sie die Möglichkeit, sich unter den Kategorien (Categories) nur für Serif, Sans Serif, Display, Handwriting oder Monospace zu entscheiden. Dadurch wird das angezeigte Angebot etwas eingeschränkt und somit übersichtlicher. Falls Sie keine Auswahl treffen, zeigt Google immer die Fonts aller Kategorien in ungeordneter Reihenfolge an. Unter Sprache (Language) belassen Sie es bei der Voreinstellung, es sei denn, Sie benötigen wirklich exotische Schriftzeichen.

Anschließend können Sie noch die Auswahl durch bestimmte Eigenschaften wie die Anzahl der Stile (Number of Styles), Stärke (Thickness), Neigung (Slant) oder Weite (Width) weiter eingrenzen bzw. nur variable Fonts (zur eigenen Anpassung) anzeigen lassen. Zuletzt bestimmen Sie über das Dropdown-Menü rechts die Sortierung, indem Sie die Reihenfolge absteigend nach im Trend liegenden (Trending), Populärsten (Most popular), Neuesten (Newest) oder „nach Namen“ (Name) festlegen.

Einzelauswahl

Unabhängig davon, welche grobe Vorauswahl Sie getroffen haben, haben Sie nun die Qual der Wahl. Während Sie durch das Angebot scrollen, werden trotz eventueller Eingrenzungen noch viele Schriften angezeigt, die Ihrer Vorstellung von vorne herein nicht entsprechen. Sobald Sie auf eine Schrift stoßen, die Ihren Wünschen zumindest nahe kommt, sehen Sie rechts oben auf der Font-Karte die Anzahl der verfügbaren Stile (Styles).

Falls bei einer fett-gedruckt und kursiv angezeigten Schrift (z. B. Lobster s. oben 1. Abbildung) nur ein Stil angegeben ist, können Sie zwar später in Ihrem CMS die Schriftgröße verändern, nicht aber die Neigung oder die Strichstärke.

Tipp 10
Insbesondere wenn Sie dieselbe Schrift auf Ihrer Website für Überschriften und Text sowie fallweise auch fett oder kursiv verwenden wollen, wählen Sie Schriften aus, deren Paket mehrere Stile enthält.

Details einzelner Schriften

Sobald eine Schrift in die engere Wahl kommt, klicken Sie auf die entsprechende Karte. In dem neuen Fenster können Sie wiederum einen Beispielsatz in Ihrer Sprache eingeben (s. auch Suche nach Schriften) und die angezeigte Schriftgröße verändern. Darunter finden Sie eine Liste, in der der Satz in allen für diese Schrift verfügbaren Stilen angezeigt wird. So haben Sie einen Eindruck davon, wie der Text später auf Ihrer Website aussehen würde.

Schriften - Stile
Verfügbare Stile von Schriften (Screenshot: Google/eb)

Nicht weniger interessant ist die Tabelle unterhalb der Liste. Einerseits erlaubt sie einen Überblick über die Gestaltung der einzelnen, für diese Schrift programmierten Zeichen einschließlich der Sonderzeichen und Ziffern, die im Beispielsatz normalerweise nicht vorkommen. Anderseits gibt die Tabelle auch Auskunft darüber, ob und welche Schriftzeichen für Sprachen mit einem anderen Alphabet (z. B. kyrillisch) dazugehören.

Schriften - Zeichentabelle
Schriften – Einzelne Zeichen (Screenshot: Google/eb)

Am Ende der Seite erhalten Sie zusätzliche Informationen über die Schrift selbst sowie deren Designer. Wichtig ist vor allem der letzte Absatz mit den Angaben zu den Lizenzbedingungen. Auch bei vielen anderen Anbietern entspricht der Aufbau und Inhalt der Informationsseite in etwa der hier für Google Fonts beschriebenen.

Tipp 11
Wenn Sie eine oder mehrere Google Fonts ausgewählt haben, notieren Sie sich den genauen Namen. Manche Schriften gibt es in mehreren Variation wie z. B. Roboto, Roboto Condensed, … Mono, … Slab oder … Serif. Falls Sie eine dieser Unterarten nutzen möchten, merken Sie sich auch den Zusatz.

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.

Schriften - Einstellungen
Schriften – Webfonts Helper (Screenshot: Google/eb)

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 der Schriften 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.

Tipp 12
Sehr dünne Schriften sind weniger geeignet, da sie insbesondere in geringer Größe und auf kleinen Bildschirm schlecht lesbar sind. Sehr fette Schriften sollten nur für Überschriften verwendet werden, da sie bei längeren Sätzen/Texten sehr aggressiv wirken.

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.

Schriften - Schriftformate
Formate: Best Support – Modern Browser (Screenshot: eb)

Im Kasten unter den Auswahl-Buttons erscheint nun der CSS-Code für Ihre Schrift. 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.

Tipp 13
Zwar haben Sie die Möglichkeit schon vor dem Kopieren den Pfad, über den auf den Ordner mit Ihren Schriften zugegriffen werden kann, anzupassen. Jedoch empfiehlt es sich, dies erst später in Ihrer CSS-Datei zu tun, nachdem Sie den Ordner für Ihre Schriften erstellt haben.

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.

Schriften - CSS und Download
CSS kopieren + Schriften herunterladen (Screenshot: Google/eb)

Wenn alles in Ordnung ist, laden Sie Ihre Schrift 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 – Schriften 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.

Plesk | › Cyberduck | › Filezilla | › Advanced File Manager

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.

Tipp 14
Nachdem Sie Ihr Child-Theme aktiviert haben, ist Ihr Haupt-Theme deaktiviert. Es muss jedoch weiterhin in Ihrer 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 keine eigenständiges Theme!

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.

Tipp 15
Um ein verzögertes Laden der neuen Schriften zu vermeiden, fügen Sie für jeden Schriftstil über den Quell-Angaben (src:) noch folgende Code-Zeile ein: font-display: swap; (s. Abbildung oben: Formate).

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 Ihre Schrift 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.

Schriften - CSS- und PHP-Codes
CSS- und PHP-Codes für Schriften einfügen (Screenshot: eb)

PHP

Um Ihre neue Schrift 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.

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 zwei „Wolken“ mit den Bezeichnungen fonts.googleapis.com und/oder fonts-gestatic.com 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.

Schriften auf Websites – Fazit

Schriften auf Websites

Websichere Schriften sind langweilig – Google Fonts sind schöner und 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 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.

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.

› Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.

Dieser Beitrag gefällt Ihnen? Kopieren und teilen Sie den Link.

Sie haben Fragen / Anmerkungen oder möchten immer auf dem Laufenden bleiben?

ALLE KATEGORIEN

Webdesign
Internet
Reviews
How-To
Allgemein / Wörterbuch

ALLE SCHLAGWÖRTER

AktuellAndroidAppleAppsBloggenBrowserCloudDesignDSL-WLAN • E-MailFotoGoogleInternetsicherheitiOSmacOSMicrosoftMessengerMobilfunkOnlinediensteRechtSEOSocialTutorialsWindowsWordPress