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.

Beachten Sie, 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 herunterladen

Im ersten Schritt werden wir alle Schriften runtersaugen, die wir jemals brauchen könnten ;)

Gehe auf https://fonts.google.com/ und wählen Sie alle gefälligen Schriften [+].

Rufe danach das Panel Families Selected auf.

Wähle das Unterpanel Customize. Wähl nur den wirklich gebrauchten Schriftsatz, in der Regel also nur Latin. Du kannst aber so viele Schriftschnitte wählen, wie Du willst.

Aktiviere dann den Download.

Du kannst die Dateien lokal benutzen. Da es sich aber sehr wahrscheinlich um .ttf Dateien und nicht um web-optimierte .woff2 Dateien handelt, ist das für unseren Zweck nicht optimal.

CSS-Datei und .woff2-Fonts anfordern

Im Google Panel für Embed Standard findet sich im link-Element eine URL.

Einbindung eines google-Fonts 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Kopiere die URL (https://fonts.googleapis.com/css?family=Roboto) und gib diese in der Adresszeile ein. Als Antwort erhältst Du die CSS-Datei, die alle Regeln enthält, welche Deine zuvor heruntergeladenen Fonts betreffen. Speicher diese CSS-Datei.

In der CSS-Datei findest Du Links auf die einzelnen Fonts. Diese musst Du nun einzeln herunterladen und passend umbenennen. Dieser Vorgang braucht etwas Geduld und Konzentration.

CSS bearbeiten

Die von Google erstellte CSS-Datei ist recht umfangreich. Behalte diese als Original.

Kopiere Regeln für Schriften, die Du anwenden wirst, in eine neue CSS-Datei.

Passe hierbei die URL für den Download der Schriftarten im woff2-Format an. Idealerweise finden sich alle Schriften in einem eigenen /fonts-Ordner.

Beispiel 
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  src: local('Kalam Light'), local('Kalam-Light'), url('/fonts/Kalam-Light-Latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  src: local('Kalam Light'), local('Kalam-Light'), url('/fonts/Kalam-Light-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Du kannst nun diese CSS-Datei 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 Ihrem Projekt verwenden.

Google-Fonts werden in der Regel mit der SIL OpenFont Licence ausgeliefert. Diese gibt weitgehende Freiheiten für Benutzung und Änderung.

Du solltest den Zeichensatz vor dem Google-Download nicht über das aktuell verwendete ausweiten, sonst werden die Schriftpakete unnötig groß.

Trenne regulär verwendete Schriftsätze von selten verwendeten, und organisiere diese in separaten CSS-Dateien.

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 8.10.2025
von "http://wiki.selfhtml.org/wiki/HTML/Tutorials/Google-Fonts_selbst_hosten"