1. Schritt-für-Schritt-Anleitung
1. Schritt: Laden Sie zunächst die gewünschten Schriften von Google Fonts herunter. Dazu besuchen Sie die Website und wählen Sie die gewünschten Schriften aus. Klicken Sie anschließend auf den Button „Herunterladen“ am unteren Rand der Seite.
2. Schritt: Entpacken Sie die heruntergeladene ZIP-Datei an einem geeigneten Ort und kopieren Sie den Ordner „fonts“ in Ihren lokalen Webserver-Ordner (z.B. htdocs, public_html oder www).
3. Schritt: In Ihrem CSS-Code müssen Sie nun die neuen Schriften einbinden. Dazu fügen Sie folgende Zeilen ein:
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('/fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('/fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}WICHTIG: dieses Beispiel bezieht sich auf die Schriftart „Roboto“. Für Ihr Projekt muss natürlich die passende Schrift ausgewählt werden. Benutzen Sie am besten den Webfonts Helper.
Die URL zu den einzelnen Font-Dateien kann relativ oder absolut erfolgen. Falls Sie hier wenig Kenntnisse haben, gehen Sie mit der absoluten URL den leichteren Weg. Das kann dann so aussehen: https://ihre-domaine.de/ordner/fontdatei.woff2
2. Die Vorteile lokaler Schriftarten
Sie werden schneller geladen und erzeugen keine unnötigen Abhängigkeiten. Einige Benutzer blockieren sogar externe Medien und somit würde das Design falsch dargestellt werden. Aber der Datenschutzaspekt wiegt weiterhin am höchsten. Wenn die Fonts lokal gehostet werden, gehen Sie auf Nummer sicher. Lokale Schriftarten haben also viele Vorteile und sollten immer bevorzugt werden, wenn es die Situation zulässt.
3. Nachteile von Google Fonts
Natürlich gibt es auch hier einige Nachteile, die man nicht unterschätzen sollte. Durch die externe Verknüpfung erhöht sich die Ladezeit der Webseite, da zusätzliche HTTP-Anfragen gestellt werden müssen. Zudem kann es vorkommen, dass Google Fonts aufgrund von technischen Schwierigkeiten oder Störungen nicht geladen werden können und somit das Design komplett durcheinandergerät. Allerdings ist dieses Risiko relativ gering und kann durch eine gute Planung minimiert werden.
Außerdem gibt es mittlerweile auch einige Alternativen zu Google Fonts, die ebenfalls kostenlos und einfach zu nutzen sind.
4. Fazit
Ob man Google Fonts direkt einbindet oder lokale Schriftarten verwendet, muss jeder für sich selbst entscheiden. Beide Optionen haben ihre Vor- und Nachteile, die man vor der Umsetzung bedenken sollte. In Deutschland bzw. in der europäischen Union sollten Google Fonts auf jeden Fall nur lokal genutzt werden. Sollte man in der Schweiz verwurzelt sein oder in einem Land wo die DSGVO nicht gilt, kann man weiterhin die direkte Einbindung über Google wählen. Dennoch hat die lokale Einbindung auch in Sachen Performance Vorteile.