HTML/Tutorials/Google-Fonts selbst hosten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Google-Fonts kann man nicht nur einfach einbinden, sondern man sollte sie im Gedenken an den Schutz der Privatsphäre aller User auch selbst hosten. Wir zeigen Ihnen, 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.

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

Fonts herunterladen[Bearbeiten]

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

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

Rufen Sie danach das Panel Families Selected auf.

Wählen Sie das Unterpanel Customize. Wählen Sie nur den wirklich gebrauchten Schriftsatz, in der Regel also nur Latin. Sie können aber so viele Schriftschnitte wählen wie Sie wollen

Aktivieren Sie dann den Download.

Sie können 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[Bearbeiten]

Im Google Panel für Embed Standard können Sie im link-Element eine URL entdecken.

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

Entnehmen Sie die URL (https://fonts.googleapis.com/css?family=Roboto) und geben Sie diese in der Adresszeile ein. Als Antwort erhalten Sie die CSS-Datei, die alle Regeln enthält, welche Ihre zuvor heruntergeladenen Fonts betreffen. Speichern Sie diese CSS-Datei.

In der CSS-Datei finden Sie Links auf die einzelnen Fonts. Diese müssen Sie nun einzeln herunterladen und passend umbenennen. Dieser Vorgang braucht etwas Geduld und Konzentration.

CSS bearbeiten[Bearbeiten]

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

Kopieren Sie aber Regeln für Schriften, die Sie anwenden werden, in eine neue CSS-Datei.

Passen Sie hierbei die URL für den Download der Schriftarten im woff2-Format an. Womöglich werden Sie einen eigenen /fonts-Ordner verwenden.

Beispiel: 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;
}

Sie können nun diese CSS-Datei in Ihrem Projekt über ein link-Element verwenden.

Laden Sie abschließend die CSS-Datei an den vorgesehenen Speicherort und laden Sie die Fonts sowie den Lizenz-Text, den Sie von Google bekamen, in Ihren Font-Ordner.

Sie können jetzt die Schriften wie gewohnt in Ihrem Projekt verwenden.

Ein paar Details[Bearbeiten]

Google bietet über die Download nur Fonts im .ttf-Format an. Um aber an die eigentlich wichtigen woff2-Formate ranzukommen, muss man etwas Ausdauer mitbringen. woff2-Dateien sind wesentlich kleiner als ttf-Formate. Alle modernen Browser können mittlerweile damit umgehen.

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

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

Trennen Sie regulär verwendete Schriftsätze von selten verwendeten, und organisieren Sie diese in separaten CSS-Dateien.

Mehr Informationen über Details der Google-API erfahren Sie auf https://developers.google.com/fonts/docs/getting_started.

Beachten Sie, dass Sie für Font-Effekte keine speziellen Fonts brauchen. Die werden nämlich durch Firefox oder andere Browser durch ganz normales CSS emuliert und sind somit nicht an Schriftschnitte gebunden.

Fonts von anderen Quellen hosten[Bearbeiten]

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

Bewahren Sie Lizenzen immer auf, am besten auch auf dem Server.

Wenn Ihnen die Privatsphäre Ihrer Besucher etwas wert ist, werden Sie Inhalte von sogenannten CDN (Content-Delivery-Networks) selber hosten, sofern Ihnen die Lizenzen das auch erlauben. Zumindest Ihre Datenschutzerklärung vereinfacht sich dadurch erheblich.


Mehr Details rund um's Schriften einbinden erfahren Sie unter CSS:@font-face.

Weblinks[Bearbeiten]