HTML/Tutorials/Google-Fonts selbst hosten
- 20min
- mittel
- Grundkenntnisse in
• HTML
• CSS: Schriftformatierung
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.
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.
Inhaltsverzeichnis
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.
<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.
/* 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.
Information: woff2-format verwenden!
Google bietet über den 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.
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
- google: Google Web Fonts
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
.