Schöne Schriften
Google Fonts selbst hosten – und den Datenschutz verbessern
Googles Fonts verschönern das Web. Wer datenschutzrechtliche Probleme vermeiden will, bindet die Schriftarten nicht von Googles Servern ein, sondern hostet sie selbst. Das ist nicht kompliziert und man kann den Umbau seiner Website nutzen, um ihr einen optischen Feinschliff zu verpassen.
Es muss nicht immer Arial oder Georgia sein: Google Fonts liefert mehr als tausend Schriftarten für Websites, Logos, Flyer und andere Projekte. Sämtliche Fonts dürfen auch für kommerzielle Zwecke kostenlos verwendet werden. Ein paar Zeilen HTML und CSS reichen aus, um sie schnell und einfach in eine Website einzubinden. Google punktet durch eine rasante Auslieferung der Schriften von seinen weltweit verteilten Servern.
Dass die Fonts von Google stammen, behagt allerdings nicht jedem. In den vergangenen Monaten schickten Anwälte gar Abmahnungen an Website-Betreiber, die Schriften von Googles Servern laden. Denn dabei landen IP-Adressen von Seitenbesuchern bei dem US-Konzern, was nach einem Urteil des Landgerichts München deren Persönlichkeitsrecht verletzen kann [1]. Glücklicherweise können Sie die Fonts auch auf Ihrem eigenen Webspace ablegen und von dort einbinden. Kompliziert ist das nicht – lediglich das Dateiformat müssen Sie anpassen.
Den Font der Wahl finden
Der schwierigste Schritt bei der Nutzung von Google Fonts dürfte sein, aus dem dicken Katalog von mehr als 1400 Schriftfamilien eine passende auszuwählen. Die Fonts decken viele Sprachen und Schriftsysteme ab. Schränken Sie die Auswahl zunächst auf Schriften mit lateinischen Buchstaben ein, dann bleiben knapp 1300 Schriftfamilien.
Mit dem Auswahlfeld „Categories“ schränken Sie die Auswahl weiter ein, auf Schriften mit oder ohne Serifen, Schriften für große Darstellungen (Display), sowie auf Handschrift- und Monospace-Fonts. Mit den Reglern bei „Font properties“ suchen Sie hauchzarte oder fette, sehr breite oder schmale Schriften. Das Feld „Show only variable fonts“ beschränkt die Auswahl auf die besonders flexiblen und Bandbreite sparenden variablen Fonts, die wir weiter unten ab dem Abschnitt „Variabel = schlank = schnell“ genauer vorstellen. Eine Suchfunktion für Font-Namen gibt es auch – falls Sie schon eine bestimmte Type ins Auge gefasst haben.
Ein Klick auf die Schrift der Wahl öffnet eine Detailseite. Darin sind Beispielsätze sowie viele der im Font verfügbaren Glyphen (Zeichen) aufgelistet. Prüfen Sie kurz, ob der Font der Wahl deutsche Umlaute und das ß enthält – allerdings sind uns keine Fonts untergekommen, die diese Glyphen nicht enthalten. Zusätzlich finden Sie oftmals Sonderzeichen wie Herzen, Sterne oder sogar Emojis. Die Detailseite listet auch die unterschiedlichen Schriftschnitte, die gemeinsam eine Schriftfamilie ergeben.
Schriftschnitte sind Variationen einer Schriftart. In der Regel sind das Regular für normalen Text, Bold für Einfettungen, Italic für kursiv gesetzte Sätze sowie die Kombination Bold-Italic. Per Klick aufs Plus-Icon fügen Sie die benötigten Schnitte eines Fonts einer Sammlung hinzu. Eine Sammlung kann auch aus mehreren Schriftarten bestehen.
In der rechten Spalte zeigt Google Fonts die Auswahl samt nötigem CSS-Code für die Website – allerdings findet sich dort nur der Code, der die Fonts von den Google-Servern einbindet.
Lokal servieren
Sämtliche ausgewählte Fonts lädt man mit dem Knopf „Download all“ in der rechten Spalte herunter. Alternativ geht das auch einzeln aus der Detailseite des Fonts mit dem Knopf „Download Family“. Google stellt eine Zip-Datei mit sprechenden Namen zusammen. Entpacken Sie die enthaltenen Dateien. Oftmals ist noch ein wenig Handarbeit notwendig, bevor Sie die Fonts auf Ihrem Server oder Webspace ablegen und in Ihre Seiten einbinden können.
Das hat mit den Dateiformaten zu tun. Dass die Google-Fonts so schnell laden, liegt auch an einer klugen Kompression: Wenn möglich, liefert Google die gehosteten Fonts im WOFF- oder WOFF2-Format aus, wenn Webmaster sie von den Google-Servern einbinden. Die Plattform versendet stets die kleinstmögliche Datei, abhängig vom verwendeten Browser und seinen Fähigkeiten. Zum Download stellt Google die Schriftarten aber häufig nur als TrueType- (TTF) oder OpenType-Fonts (OTF) bereit.
WOFF steht für „Web Open Font Format“. Während Version 1 mit zlib komprimiert, setzt Version 2 auf eine wesentlich stärkere Kompression mit dem sogenannten Brotli-Algorithmus. Im Vergleich zu WOFF erreicht WOFF2 eine Größenreduzierung zwischen 20 und 50 Prozent. Alle modernen Browser unterstützen das Format; der veraltete Internet Explorer verarbeitet immerhin WOFF.
Im Prinzip ist WOFF2 ein Container, der einen stark komprimierten OpenType- oder TrueType-Font enthält, ergänzt um Metadaten im XML-Format. Sinn des Formats ist es, Web-Fonts eindeutig von lokal installierten Schriftdateien zu unterscheiden und eine schnelle Auslieferung vom Server zum Client zu garantieren. In eine Webseite lassen sich (Web-)Fonts via @font-face einbinden. In CSS sieht das so aus:
@font-face { font-family: Meinfont; font-style: normal; font-weight: 400; src: local('Meinfont'), url('meinfont.woff2') format('woff2'), url('meinfont.woff') format('woff'); }
Dieses Beispiel kümmert sich um den regulären Schriftschnitt (font-weight: 400), der für typische Textabsätze zum Einsatz kommt. Unter src prüft zuerst local(), ob die Schriftart bereits auf dem Rechner des Nutzers installiert ist, was einen Download einsparen würde.
Fehlt der Font lokal, folgen unter url() die Adressen zur WOFF2- beziehungsweise WOFF-Datei. Der Browser arbeitet die url()-Einträge von oben nach unten ab: Unterstützt der Browser das WOFF2-Format nicht, lädt er die Schrift als WOFF-Datei herunter. Achten Sie darauf, den relativ zur CSS-Datei angegeben URL-Pfad anzupassen, sodass der Browser die Dateien auch findet. (Sie prüfen das mit den Entwicklertools der Browser: In der Konsole erscheint ein Warnhinweis, wenn eine WOFF-Datei nicht geladen werden konnte.)
Grundsätzlich können Sie TTF- und OTF-Dateien auch direkt in Ihre Seiten einbinden, Browser kommen damit klar. Allerdings sind TTF- und OTF-Dateien deutlich größer als die komprimierten WOFF- und WOFF2-Varianten. Die TTF-Datei der Schrift IBM Plex Serif Regular zum Beispiel ist 160 KByte groß, wohingegen die WOFF2-Fassung nur 50 KByte wiegt. Wenn Sie noch die Schnitte für Bold und Italic hinzugeben, ergibt sich ein Gesamtunterschied von 336 KByte (491 vs. 155 KByte). Das mag nach wenig klingen. Bedenken Sie aber, dass auf einer Website zumeist zwei Fonts eingebunden sein sollten – eine Serifenschrift sowie eine Schrift ohne Serifen. Eventuell kommt sogar noch eine Mono-Schrift etwa für Code-Beispiele hinzu. Mit einem schnellen DSL-Anschluss ist eine übergewichtige Website zwar ruckzuck geladen; unterwegs zählt unter schlechten Umständen allerdings jedes KByte.
Fontquetschen
TTF- und OTF-Fonts sollten Sie also zunächst in das WOFF/WOFF2-Format transformieren. Grundsätzlich gilt zwar, dass eine Umwandlung einen Lizenzverstoß darstellen kann. Die Fonts bei Google sind davon aber nicht betroffen. Für die Umwandlung können Sie einfach Generatoren verwenden.
Um TTF- und OTF-Dateien in WOFF(2)-Dateien umzuwandeln, stellt Google das Kommandozeilenwerkzeug Fonts Tools bereit. Entwickler Henry Desroches hat auf seiner Website eine verständliche Anleitung veröffentlicht (ct.de/ya5f). Bei den Webdiensten Webfont Generator von Font Squirrel und dem Transfonter müssen Sie nichts installieren. Sie laden einfach den zu konvertierenden Zeichensatz hoch, nehmen ein paar Einstellungen vor und drücken auf einen Knopf.
Sofern Sie nur Google Fonts konvertieren wollen, geht es noch einfacher: Der Entwickler Mario Ranftl hat dafür eine Web-App gebaut, den Google Webfonts Helper (ct.de/ya5f). In der linken Spalte listet er mehr als 1400 Schriftfamilien auf. Eine Suchfunktion hilft, die gewünschte zu finden. Klicken Sie den gewünschten Font an und wählen Sie im ersten Schritt den Zeichensatz aus; für deutsche Texte schränken Sie mit „latin“ das Angebot auf die bekannten lateinischen Buchstaben ein. Je nach Schriftfamilie gibt es Zeichen für exotischere Buchstaben. Im zweiten Schritt wählen Sie die Stile aus, also etwa Regular, Italic (kursiv) und „700“ (fett).
Der Google Webfonts Helper präsentiert Ihnen dann einen Download-Knopf für die Dateien und den passenden CSS-Code für Ihre Website. Der Dienst bietet Ihnen die Wahl zwischen den Optionen „Modern Browser“ und „Best Support“. Wenn Sie letztere wählen, sind als Fallback noch die Schriftarten in den Formaten WOFF und TTF sowie SVG aufgeführt – so findet wirklich jeder Browser eine passende Datei. Mit „Modern Browsers“ verkürzen sich die CSS-Regeln radikal – nur noch WOFF und WOFF2 werden ausgeliefert.
Variabel = schlank = schnell
Üblicherweise gibt es für jeden Schriftschnitt eine eigene Fonts-Datei, also etwa eine für den normalen Schnitt (Regular), eine weitere für fett (Bold) und so weiter. Hinzu kommen Dateien für Kombinationen wie fett-kursiv (Bold-Italic).
Auf diese Weise kommen rasch einige Schriftdateien zusammen, die der Browser herunterladen muss, was zusätzliche HTTP-Anfragen zur Folge hat. Aus Performancegründen ist es sinnvoll, sich die Auswahl der Schriftschnitte genau zu überlegen und gegebenenfalls zu reduzieren, um die Website schlank zu halten.
Oder aber Sie setzen auf variable Fonts: Sie bestehen im besten Fall aus einer einzigen OpenType-Schriftdatei, was die Website-Performance verbessert. Variable Fonts verfügen über sogenannte Achsen (Axis), die das Aussehen der Buchstaben bestimmen.
Jede Achse erhält einen Wert, den nicht nur der Schriftentwickler, sondern der Nutzer verändern kann. Alle Werte dazwischen werden interpoliert, also mathematisch berechnet. Es lassen sich Zwischenschritte im Font ablegen, um dessen Aussehen zu optimieren und Darstellungsfehler zu vermeiden.
Im OpenType-Standard sind fünf Achsen festgeschrieben. Ein Achsenwert steuert die Strichstärke der Buchstaben, von zart bis fett oder gar black. Eine andere Achse legt die Zeichenbreite fest, außerdem lassen sich Kursivheit, Schräglage und optische Größe frei bestimmen. Sämtliche Achsenwerte definieren kombiniert eine Instanz, die einem traditionellen Schriftstil entspricht. Welche Achsen definierbar sind, bestimmen aber die Schriftgestalter: Neben den fünf Standards können Sie beliebig viele andere Gestaltungsachsen festlegen.
Der Vorteil dieser Methode: Das Aussehen eines Fonts lässt sich sehr fein festlegen. Statt eine übliche Schriftstärke von 400 zu nehmen, sind auch 388 oder 404 möglich – je nach persönlicher Vorliebe. Mit ihrer Flexibilität erleichtern variable Fonts auch das Webdesign für kleinere Bildschirme: Je nach deren Breite kann sich die Schrift flexibel anpassen und bleibt auch auf einem sehr schmalen Bildschirm lesbar.
Ein besonders beliebter variabler Font ist Roboto Flex. Auf der Unterseite „Type Tester“ der Detailseite von Roboto Flex auf der Google-Fonts-Site können Sie mit den verschiedenen Achsen der Schriftart herumspielen, zum Beispiel, um die Strichstärke stufenlos mit dem Schieberegler zu bestimmen.
Über einen anderen Achsenwert lässt sich die Breite (Width) der Buchstaben festlegen. Durch die Kombination der beiden Achsen ergeben sich Tausende mögliche Stile. Die variablen Fonts gibt es seit 2016, sämtliche modernen Browser unterstützen sie inzwischen.
Variable Fonts analysieren
Praktisch ist die Website Wakamai Fondue von Roel Nieskens: Hier öffnen Sie einen beliebigen Font, indem Sie dessen Datei einfach ins Browser-Fenster ziehen. Anschließend zeigt die Website viele Informationen an, darunter die Anzahl der verfügbaren Sprachen, Zeichen und Glyphen. Unter „Character set“ sind alle im Font verfügbaren Zeichen aufgelistet. Wakamai Fondue listet viele Besonderheiten der Fonts auf, etwa Ligaturen und welche Achsen sie bereitstellen. Die Website liefert außerdem CSS-Code, mit dem sich die Features der Schriftart ausreizen lassen.
Mit CSS ließen sich anfangs nur zwei Achsen verlässlich einstellen: die Schriftstärke mit font-weight sowie die Zeichenbreite mit font-stretch. Mit der CSS-Eigenschaft font-variation-settings kamen weitere Möglichkeiten hinzu, Achsen anzusteuern. Webdesigner können nun also das volle Potenzial der variablen Fonts ausschöpfen – sie stellen eine spannende Alternative zu „statischen“ Schriftarten dar. Das folgende Code-Beispiel veranschaulicht beispielhaft, wie man einen variablen Fonts als WOFF2-Datei auf einer Webseite einbindet:
@font-face { font-family: 'Roboto Flex'; src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations'), url('RobotoFlex-VF.woff2') format('woff2-variations'); font-weight: 100 1000; font-stretch: 25% 151%; }
Statt dem Browser via CSS mitzuteilen, dass der eingebundene Roboto-Font in einem bestimmten Schriftschnitt vorliegt, ist hier die verfügbare Spannweite der Schriftstärke von 100 bis 1000 angegeben. Alle Werte darunter und darüber werden gekappt und ab- oder aufgerundet. Ebenso ist bei font-stretch, also der Laufweite, eine Spannweite definiert: in diesem Fall 25 bis 151 Prozent. Um Darstellungsfehler zu vermeiden, sollten Sie die beiden Spannweiten unbedingt angeben.
Ist der Font ordnungsgemäß eingebunden, weisen Sie etwa Elementen, die als „fett“ gekennzeichnet sind, eine bestimmte Schriftstärke zu:
strong { font-family: 'Roboto Flex'; font-weight: 750;[...] }
Normalerweise würde die Schriftstärke bei gefetteten Texten stets 700 lauten. Bei variablen Fonts haben Sie die freie Wahl. Zudem muss der Wert bei font-weight anders als bei statischen Fonts nicht mehr in 100er-Schritten erfolgen, was eine individuelle und äußerst flexible Gestaltung erlaubt.
Mehr Gestaltungsspielraum
Es lohnt sich also in mehrerer Hinsicht, die Fonts Ihrer Website lokal zu hosten. Sie vermeiden auf diese Weise nervige Abmahnschreiben. Den Umbau können Sie nutzen, um Ihre Seite typografisch aufzuwerten. Wenn Sie auf die richtigen Dateiformate setzen, sollte sich die Performance nicht großartig verschlechtern.
Dies ist die gekürzte und überarbeitete Version eines Artikels, der ursprünglich auf heise+ erschien. (jo@ct.de)
Webdienste und Downloads: ct.de/ya5f