HTML/Tutorials/Google-Fonts selbst hosten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Google Fonts bietet als CDN viele kostenlose Schriften an, die mit einer Zeile HTML bequem in jede Webseite eingebunden werden.

Das war 2010 eine große Verbesserung: Anstatt damals Schriften in mehreren Formaten mit jeder Seite mitzuliefern, konntest Du sie mit einem Link zu Google einbinden, die automatisch die Browserdaten auslasen und dann die gewünschte Schrift im passenden Format ausgaben.

Die Schriften selbst sind aber keine Google-Fonts - wenn man genau hinschaut, merkt man, dass Google freie Fonts einfach als seine „verkauft“. Google-Fonts werden in der Regel mit der SIL OpenFont Licence ausgeliefert. Diese gibt weitgehende Freiheiten für Benutzung und Änderung.

Beachte, dass auf diese Weise auch Google selbst von den Besuchen auf Deinen Seiten erfährt und Daten Deiner Gäste erhält. Das Landgericht München hat geurteilt (20.01.2022, Az. 3 O 17493/20), dass die Bereitstellung eines Google Fonts auf eine Weise, die die IP des Seitenbesuchers ohne seine Einwilligung an Google übermittelt, einen Schadenersatz begründet.

Schöner geht es, wenn Du die Schriftdateien selbst im woff2-Format hostest und auslieferst. Dann werden keine Daten erhoben. In diesem Tutorial lernst Du, wie man Schriften von Google-Fonts einfach und kostenfrei herunterladen und sie im Gedenken an den Schutz der Privatsphäre aller User auch selbst hosten kann. Wir zeigen Dir, wie das geht!

Wir werden den Vorgang in drei Schritten durchführen. Diese sind leider notwendig, da man zwar Google-Fonts selbst hosten darf, Google das aber nicht eben fördern will. Es gibt auch Hilfswerkzeuge, um die Schritte zu automatisieren. Diese sind allerdings nicht voll ausgereift, sodass händische Korrekturen notwendig sein können. Hierbei ist das Tutorial hilfreich.

Fonts auswählen

Zunächst musst Du Dir einen oder mehrere Fonts aussuchen, die Du verwenden möchtest. Google Fonts bietet (Stand 2025) fast 2000 Schriftfamilien an, die unterschiedliche Schriftsysteme (wie Latin, Cyrillic, Japanisch und vieles mehr) und Sprachen unterstützen, und das in unterschiedlichsten Stilrichtungen. Du kannst die Filterfunktion verwenden, um die Auswahl einzugrenzen.

Oben rechts ist ein „Einkaufstaschen“-Symbol. Wenn Du Schriften ausgewählt hast, befindet sich daneben eine Zahl. Falls das jetzt schon der Fall ist, klicke bitte für einen sauberen Start auf die Einkaufstasche und wähle die "Remove All" Funktion, um leer zu beginnen. Klicke danach auf "Browse Fonts".

Schau Dir die Schriften an, die Dich interessieren. Wenn Du eine haben möchtest, klicke oben rechts auf "Get font". Du kommst sofort in den Warenkorb und kannst den erreichten Stand herunterladen. Du kannst aber auch zweimal die "Zurück"-Funktion des Browsers nutzen, um in die Auswahlliste zurückzukehren und einen weiteren Font einzusammeln.

Wenn Du alle Fonts im Warenkorb hast, schau ihn noch einmal durch. Ist etwas dabei, was Du doch nicht willst? Hinter jedem Font ist ein Mülleimer-Symbol, um ihn zu entfernen.

CSS-Datei anfordern und reduzieren

Wenn es nach Google ginge, wären wir jetzt fertig. Rechts oben ist ein Button "Get embed code", und wenn man dort klickt, bekommt man ein HTML-Fragment dieser Art (hier wurden die Schriften Parkinsans und Roboto ausgewählt):

CSS-Datei von Google-Fonts 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Hinter der URL https://fonts.googleapis.com/css2 steckt ein CSS-Generator, der die nötigen @font-face-Deklarationen für die gewünschten Fonts erzeugt und darüber auf die eigentlichen WOFF2-Dateien auf gstatic.com verweist. Das wollen wir nicht, denn dadurch klingelt jeder unserer Seitenbesucher mit seiner IP-Adresse bei Google an und kann getrackt werden.

Wir werden diese CSS daher einmal von Google generieren lassen, und dann selbst speichern. Aber vorher möchtest Du vielleicht noch den Umfang der geladenen Font-Dateien weiter einschränken? Für jede ausgewählte Schrift findest Du auf der „Embed Code“ Seite eine Liste von Stil-Optionen. Eventuell musst Du sie durch einen Klick auf „Change styles“ auch erst aufklappen. Die Optionen variieren je nach Schriftfamilie, und sie sind dämlich gemacht. Bei den Schriftgewichten kann man auswählen, ob man eins oder alle will - aber „3 von 9“ geht nicht. Ähnlich ist es bei den Laufweiten, und eine Auswahl des Schriftsystems gibt es überhaupt nicht. Wenn Du Kyrillisch oder Vietnamesisch nicht brauchst, die Schrift es aber anbietet, tja, schade. Es ist deshalb zumeist einfacher, die tatsächliche Auswahl an Hand der generierten CSS Datei zu treffen.

Kopiere die Adresse aus dem Stylesheet-Link heraus, übertrage sie in die Adresszeile des Browsers und rufe die Seite ab. Du bekommst eine mehr oder weniger umfangreiche Liste von @font-face Definitionen. Markiere den gesamten Text und übertrage ihn mit dem Codeeditor deiner Wahl in eine CSS-Datei. Speichere diese Datei zweimal - einmal als Original und einmal zum weiteren Bearbeiten. Das Original lange aufzubewahren nützt nicht viel, weil Google die Schriftdateien ab und zu umbaut, aber halte es zumindest bis zum Abschluss der Schriftübernahme auf deinen Server zurück, falls Dir ein Fehler unterläuft.

Nun schau Dir diese Datei genau an. Vor jeder @font-face Definition steht ein CSS-Kommentar, der angibt, welche Zeichen diese Definition unterstützt. Wenn Du zum Beispiel Kyrillisch, Vietnamesisch oder Griechisch nicht brauchst, dann kannst Du das entsprechende @font-face löschen. Teilweise gibt es mehrere Definitionen für ein Schriftsystem, z.B. cyrillic und cyrillic-ext. Du musst das nicht tun, eventuell fällt Dir ein zu intensives Aufräumen auch später auf die Füße. Performance beim Seitenbesucher ist nicht der Grund zum Ausmisten, denn der Browser wird nur die WOFF2-Dateien laden, die er für die darzustellenden Zeichen braucht, aber es spart Dir beim Download der WOFF2-Dateien Arbeit.

Die meisten Fonts haben getrennte @font-face Definitionen für die Font-Styles normal und italic. Hier musst Du beim Aufräumen aufpassen, die Liste ist zuerst nach Font-Style und dann erst nach Schriftsystem sortiert.

WOFF-Dateien herunterladen und die CSS-Datei darauf anpassen

Bevor Du damit anfängst: mache Dir einen Plan, wie Du deine Schriften organisieren willst.

  • Wo auf dem Server soll die die CSS-Datei für die selbstgehosteten Fonts stehen?
  • Möchtest Du eine CSS Datei für alle Schriften oder eine CSS-Datei pro Schrift? Eventuell möchtest Du auch Schriftpakete bilden, die dann in einer CSS Datei stehen und für die nur ein einziger HTTP-Zugriff nötig ist.
  • Schau Dir die URLs der Google-WOFF-Dateien an. Darin befindet sich ein Pfad-Teil wie v49 – das bedeutet: Google versioniert die Schriften. Möchtest Du die Schriftversion, die Du übernommen hast, im Namen deiner CSS-Datei haben? Also zum Beispiel: roboto.css oder roboto_v49.css?
  • Wo sollen die WOFF-Dateien stehen? Zusammen mit dem CSS in einem Ordner? Alle zusammen in einem woff-Unterordner? Ein woff-Unterordner pro Schrift? Sollte der Name des woff-Unterordners ebenfalls die Versionsnummer beinhalten?

Bei Selfhtml haben wir es so gemacht, dass wir eine CSS-Datei je Schrift erstellt haben und diese in einem fonts-Ordner des Selfhtml-Skins liegen. In diesem fonts-Ordner liegt ein Unterordner pro Schrift. Die Fontversion haben wir nur in den Namen des Unterordners eingebaut.

Gehe nun die @font-face Angaben einzeln durch. Für jede davon muss die WOFF-Datei, die dort angegeben ist, auf deinen Server übertragen und an der Position abgelegt werden, die deinem Plan entspricht. Wie Du das machst, hängt von deinem Werkzeugkasten ab. Wenn Du an einem Windows-Gerät sitzt und dein Server anderswo steht, kopiere die URL in die Adressezeile des Browsers, drücke die Eingabetaste, warte den Download ab, wechsle dann in dein Filetransfer-Tool und übertrage die Datei aus dem Download-Ordner (als Binärdatei!) auf deinen Server.

Für jede Datei, die Du übertragen hast, solltest Du SOFORT die src-Angabe im @font-face anpassen, sonst kommst Du durcheinander. Der Browser sucht Font-Dateien immer relativ zu der Datei, in der die @font-face Definition stand. Wenn beispielsweise die Schrift in /fonts/Roboto.css definiert wird, eine @font-face Definition die Datei https://fonts.gstatic.com/s/roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2 haben möchte und Du die Roboto-WOFFs in /fonts/roboto_v49 ablegen willst, dann übertrage KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2 dorthin und ändere die @font-face Defintion so ab:

Abgeändertes @font-face 
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('roboto_v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Diesen Schritt musst Du für JEDE @font-face Angabe wiederholen. Wenn Dein innerer Monk dich treibt, so wie mich beim Selfhtml-Skin, dann benenne die kryptischen Dateinamen lesbar um. Oder besser: lass es - es nützt keinem etwas.

Wenn Du damit fertig bist, kannst Du die CSS-Datei mit den @font-face Defintionen in Deinem Projekt über ein link-Element verwenden.

Lade abschließend die CSS-Datei an den vorgesehenen Speicherort und lade die Fonts sowie den Lizenz-Text, den Du von Google bekommen hast, in Deinen Font-Ordner.

Du kannst jetzt die Schriften wie gewohnt in Deinem Projekt verwenden. Orientiere Dich auf der FAQ-Seite von Google-Fonts über die gültigen Lizenzbestimmungen für die Schriften und halte sie ein. Bei den SIL-Fonts ist es einfach: verwende sie. Es gibt aber auch Fonts mit anderen Lizenzen, bei denen Du vielleicht einen Vermerk auf deiner Seite anbringen musst, dass Du sie nutzt. Da sich hier regelmäßig etwas ändern kann, können wir hier dazu keine Angaben machen und auch keine Links setzen.

Mehr Informationen über Details der Google-API erfährst Du auf https://developers.google.com/fonts/docs/getting_started.

Fonts von anderen Quellen hosten

Selbstverständlich ist das hier gezeigte bei anderen Font-Quellen analog anzuwenden.

Bewahre Lizenzen immer auf, am besten auch auf dem Server.

Wenn Dir die Privatsphäre Deiner Besucher etwas wert ist, wirst Du Inhalte von sogenannten CDN (Content-Delivery-Networks) selber hosten, sofern Dir die Lizenzen das auch erlauben. Zumindest Deine Datenschutzerklärung vereinfacht sich dadurch erheblich.


Mehr Details rund um's Schriften einbinden erfährst Du unter CSS:@font-face.

Weblinks

Hilfswerkzeuge / Automatisierung

FontDownloader

Online verfügbar: FontDownloader

  • Unterstützt kein unicode-range.

fontsource

Online und NPM-Pakete verfügbar: fontsource

  • Für lokales Hosting in Node.js-Projekten.
  • Font-Download noch im Alpha-Status (Stand: 2022).
  • Unterstützt unicode-range.

Abgerufen am 21.10.2025
von "http://wiki.selfhtml.org/wiki/HTML/Tutorials/Google-Fonts_selbst_hosten"