Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Typography

Wie können Sie Google Fonts selbst auf Ihrem eigenen Server hosten?

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Als Webdesigner im Zeitalter des Hochgeschwindigkeitsinternets haben wir uns angewöhnt, externe Abhängigkeiten wie Schriftarten von Servern von Drittanbietern hinzuzufügen, am häufigsten von Content Delivery Networks (CDNs). Dies ist jedoch nicht immer die beste Entscheidung. Manchmal ist es immer noch besser, sich an Ihre eigene Infrastruktur zu halten und Ihre Assets auf Ihrem lokalen Server zu hosten.

In diesem Artikel erfahren Sie, wie Sie ein häufig verwendetes statisches Asset selbst hosten: Google Fonts. Dies gilt sowohl für lokal gehostete Websites auf Ihrem System als auch für Ihren eigenen Webserver. Auch wenn das Selbsthosten von Google Fonts auf den ersten Blick einfach und selbsterklärend erscheint, gibt es eine Menge Dinge zu beachten, wenn Sie die Leistung im Auge behalten möchten.

google fontsgoogle fontsgoogle fonts

Bevor wir uns mit den praktischen Details befassen, sollten wir uns ansehen, wann es sich lohnt, Google Fonts auf Ihrem eigenen Server zu hosten.

Vor- und Nachteile von selbsthostenden Google Fonts

Diese Vor- und Nachteile gelten nicht nur für Google-Schriftarten, sondern auch für alle im Internet gehosteten Schriftarten. Der einzige Unterschied, der wahrscheinlich erwähnenswert ist, besteht darin, dass Google Fonts auf dem CDN von Google gespeichert sind, sodass Sie eine geringe Latenz, ordnungsgemäße Wartung und gute Leistung erwarten können (im Gegensatz zu einigen kleineren Anbietern). Außerdem müssen Sie sich keine Sorgen machen, dass der Dienst irgendwann in der Zukunft eingestellt wird.

Vorteile von selbsthostenden Web-Schriftarten:

  • Besser für den Datenschutz: CDNs von Drittanbietern verwenden häufig Cookies und andere Tracking-Algorithmen, die Sie nicht unbedingt kennen. Dies ist besonders problematisch in Ländern, in denen Sie die ausdrückliche Zustimmung Ihrer Nutzer einholen müssen, um auf Ihrer Website verfolgt zu werden (hier ist beispielsweise eine gute Fallstudie zur GDPR-Konformität von Google Fonts).
  • Besser für die Sicherheit: Es ist unwahrscheinlich, dass Google Fonts gehackt werden, aber auf Ihrem eigenen Server haben Sie immer noch die volle Kontrolle über Ihre Sicherheit.
  • Schnellere und bessere Leistung: Google Fonts lädt viel zusätzliches CSS, das Sie nicht benötigen. Wenn Sie sich selbst hosten, können Sie auch Ihre schriftartenbezogenen CSS-Regeln/-Dateien bündeln und minimieren (was auch zu weniger HTTP-Anforderungen führt).
  • Offline-Verfügbarkeit: Dies ist wichtiger bei einer mobilen / Desktop-App, auf die Benutzer häufig offline zugreifen. Sie möchten jedoch möglicherweise auch über einen Offline-Browser auf Ihre Website zugreifen oder sie einfach zur späteren Verwendung herunterladen.

Nachteile von selbsthostenden Web-Schriftarten:

  • Zusätzliche Zeit und Kenntnisse: Das Hinzufügen der Schriftdateien und der @font-face-Regeln erfordert mehr Arbeit und Fachwissen.
  • Höhere Latenz bei der Schriftzustellung: Google CDN ist ein global verteiltes Netzwerk, das Ressourcen schnell, mit globaler Verteilung und geringer Latenz bereitstellt.
  • Weniger wahrscheinlich, dass Schriftarten zwischengespeichert werden: Wenn Sie Ihre Schriftarten und das zugehörige CSS aus dem Google CDN abrufen, ist es wahrscheinlicher, dass der Browser des Benutzers diese Ressourcen bereits zwischengespeichert hat.

Was passiert, wenn Sie Google Fonts von CDN hinzufügen?

Bevor Sie sich ansehen, wie Sie Google Fonts auf Ihrem Server selbst hosten, sehen wir uns schnell an, was passiert, wenn Sie sie vom Google-CDN abrufen. Angenommen, Sie möchten Ihrer Site die Schriftart Montserrat hinzufügen. Diese Schriftart verfügt über 18 statische Varianten, Sie möchten jedoch nur vier hinzufügen: regulär, regulär kursiv, fett und fett kursiv.

Da Google Fonts über eine benutzerfreundliche Oberfläche verfügen, müssen Sie nur die Stile auswählen, die Sie hinzufügen möchten, und es wird automatisch das <link>-Tag generiert, das Sie in Ihre HTML-Datei einfügen müssen.

Add Google Fonts from CDNAdd Google Fonts from CDNAdd Google Fonts from CDN

Klicken Sie rechts auf dem Bildschirm auf die Registerkarte "Einbetten", kopieren Sie das <link>-Tag und fügen Sie es Ihrer HTML-Seite hinzu (verwenden Sie nicht die @import-Regel; dies beeinträchtigt die Leistung, da sich die Ladezeit der Seite erhöht).

Pull Google Font online using link tagPull Google Font online using link tagPull Google Font online using link tag

Um die regulären, regulären kursiven, fetten und fetten kursiven Varianten der Montserrat-Schriftart zu Ihrer Site hinzuzufügen, müssen Sie die folgende Zeile in den Abschnitt <head> Ihrer HTML-Datei einfügen:

Anschließend können Sie jedem Selektor in Ihrer CSS-Datei die folgende CSS-Regel hinzufügen:

Okay, das ist alles. Aber was passiert eigentlich im Hintergrund? Wir können eine Antwort auf diese Frage erhalten, indem wir die obige URL in die Adressleiste des Browsers eingeben.

google font stylesheet opened in chromegoogle font stylesheet opened in chromegoogle font stylesheet opened in chrome

Sie können sehen, dass der Link eine CSS-Datei mit mehreren @font-face-Regeln zu allen Zeichensätzen enthält, die von der Montserrat-Schriftart unterstützt werden. jeweils kyrillisch, kyrillisch erweitert, vietnamesisch, lateinisch und lateinisch erweitert. Dies ergibt 20 @font-face-Regeln für die vier Schriftvarianten (regulär, regulär kursiv, fett und fett kursiv).

Wenn wir jedoch dieselben Schriftarten selbst hosten würden, würde der lateinische Zeichensatz auf einer englischsprachigen Website ausreichen. Das wären insgesamt vier @font-face-Regeln anstelle von 20. Wenn wir alle 18 Schriftvarianten von Montserrat verwenden wollten, würde dies zu 90 @font-face-Regeln anstelle von 18 führen - ein noch größerer Unterschied.

Lassen Sie uns nun sehen, wie Sie Google Fonts auf Ihrem eigenen Server selbst hosten.

So hosten Sie Google Fonts auf Ihrem eigenen Server

Um Google Fonts lokal zu hosten, müssen Sie alle Schriftartdateien, die Sie verwenden möchten, auf Ihren Server hochladen und Ihrem CSS die entsprechenden @font-face-Regeln hinzufügen. Sie können dies alles manuell tun, aber es gibt ein praktisches Open-Source-Tool namens Google Web Fonts Helper, das den Prozess für Sie automatisiert.

Im Google Web Fonts Helper finden Sie alle Google Fonts in der linken Seitenleiste. Um die Schriftdateien herunterzuladen und die zugehörigen CSS-Regeln zu generieren, müssen Sie ein einfaches Formular ausfüllen, in dem Sie den Zeichensatz, die Stile und den Grad der Browserunterstützung auswählen können:

Google Webfonts HelperGoogle Webfonts HelperGoogle Webfonts Helper

Ich habe den lateinischen Zeichensatz ausgewählt, dieselben Stile (regulär, regulär kursiv, fett, fett kursiv) und Unterstützung für moderne Browser, was bedeutet, dass wir die Formate WOFF und WOFF2 hinzufügen, für die bestimmte web-sichere Komprimierungstechniken gelten TTF- (und OTF-) Schriftarten.

Wenn Sie auch ältere Browser unterstützen möchten, wählen Sie die beste Unterstützung anstelle moderner Browser, bei denen die Schriftarten in fünf Formaten hinzugefügt werden: WOFF, WOFF2, TTF, EOT, SVG.

Hinweis: Der Browser lädt nur das benötigte Format herunter. Wenn es beispielsweise WOFF2 unterstützt, werden die WOFF-, TTF-, EOT- und SVG-Dateien nicht heruntergeladen, selbst wenn sie auf Ihrem Server vorhanden sind.

Unter dem Formular finden Sie die @font-face-Regeln, die Sie zu Ihrer CSS-Datei hinzufügen müssen. Hier sind zum Beispiel die @font-face-Regeln, die der Generator für unsere Spezifikationen zurückgegeben hat:

Wie Sie sehen können, hat jede Schriftvariante ihre eigene @font-face-Regel.

Innerhalb jeder @font-face-Regel prüft der src-Deskriptor zunächst mithilfe der local()-Funktion, ob der Benutzer die Schriftart auf seinem Betriebssystem installiert hat. Wenn der Benutzer die Schriftartdatei lokal hat, muss der Browser sie nicht herunterladen. Anschließend fügt die url()-Funktion die Schriftartdatei sowohl im WOFF2- als auch im WOFF-Format hinzu (der Browser lädt jedoch nur den ersten unterstützten Dateityp herunter).

Kopieren Sie diese @font-face-Regeln aus Google Web Fonts Helper und fügen Sie sie am Anfang Ihrer CSS-Datei ein. Sie müssen auch die Schriftdateien herunterladen und entpacken. Klicken Sie dazu unten im Generator auf die Schaltfläche Dateien herunterladen:

Download WOFF and WOFF2 font files from Google Web Fonts HelperDownload WOFF and WOFF2 font files from Google Web Fonts HelperDownload WOFF and WOFF2 font files from Google Web Fonts Helper

Unsere Beispiel-ZIP-Datei enthält acht Schriftdateien, die WOFF- und WOFF2-Versionen der vier Schriftvarianten. Laden Sie nach dem Entpacken alle Schriftdateien auf Ihren Server hoch (vorzugsweise in einen Ordner namens fonts/). Vergessen Sie auch nicht, auf den URL-Pfad zu achten, da die url()-Funktionen den genauen Dateipfad verwenden müssen, in dem sich Ihre Schriftarten auf Ihrem Server befinden.

Alternativ können Sie die Schriftdateien auch direkt von Google Fonts herunterladen. Sie sind dort jedoch nur im TTF-Format verfügbar.

Obwohl Sie die Schriftdateien auch als TTF hinzufügen können (WOFF und WOFF2 sind schließlich komprimierte TTF-Dateien), sind Ihre Schriftdateien viel schwerer (z. B. ist Montserrat Regular 110 KB als TTF, 23 KB als WOFF und 19 KB als WOFF2). Sie können auch ein Komprimierungswerkzeug wie das woff2-Werkzeug von Google verwenden. Insgesamt ist es jedoch einfacher, die WOFF- und WOFF2-Dateien mit dem Google Web Fonts Helper zu generieren.

Fügen Sie die Eigenschaften Schriftanzeige und Unicode-Bereich hinzu

Wenn Sie sich die aus Google CDN abgerufene CSS-Datei noch einmal ansehen, werden Sie feststellen, dass jede @font-face-Deklaration zwei zusätzliche Regeln enthält, die Google Web Fonts Helper nicht hinzufügt: font-display und unicode-range. Beide sind Deskriptoren der @font-face-Regel.

Der font-display-Deskriptor definiert, was passiert, wenn die benutzerdefinierte Font-Datei nicht sofort geladen wird. Die Verwendung mit dem swap-Wert ist eine Technik zur Leistungsoptimierung. Dies bedeutet, dass die benutzerdefinierte Schriftart sofort durch eine Systemschrift ersetzt wird und bei Verwendung die Systemschrift ersetzt. Mit dieser Technik können Sie die Ladezeiten von Seiten verkürzen und unsichtbaren Text beim Laden von Schriftarten vermeiden.

Der unicode-range-Deskriptor gibt den Zeichensatz an, den die zugehörige Schriftartdatei abdeckt. Laut dem Mozilla Development Network:

"Wenn die Seite kein Zeichen in diesem Bereich verwendet, wird die Schriftart nicht heruntergeladen. Wenn mindestens eine verwendet wird, wird die gesamte Schriftart heruntergeladen. “

Dieser Deskriptor ist also nützlich, wenn Sie mehr als einen Zeichensatz, z. B. Latein und Kyrillisch, auf eine zweisprachige Website laden möchten. Wenn Sie jeder @font-face-Regel einen unicode-range-Deskriptor hinzufügen, werden die kyrillischen Schriftdateien nicht auf Seiten mit lateinischen Zeichen heruntergeladen, und umgekehrt werden die lateinischen Schriftdateien nicht auf Seiten heruntergeladen, die lateinische Zeichen verwenden Kyrillische Zeichen.

Da in unserem Beispiel nur der lateinische Zeichensatz verwendet wird, muss die unicode-range-Eigenschaft nicht hinzugefügt werden. Da jedoch font-display: swap die Ladezeiten von Seiten verbessern kann, fügen wir es jeder @font-face-Regel hinzu:

So können Sie Google Fonts selbst hosten!

Das Selbsthosten von Google Fonts hat sowohl Vor- als auch Nachteile: Sie müssen Ihre Anforderungen und Ziele bewerten, um zu entscheiden, ob Sie sie auf Ihrem eigenen Server hosten oder aus dem CDN von Google abrufen möchten.

Sie können auch eine gemischte Lösung wählen, um das Beste aus beiden Welten zu erhalten. In diesem Tutorial von John Franey wird beispielsweise gezeigt, wie Sie @font-face-Regeln lokal hinzufügen, aber die Schriftdateien aus dem Internet abrufen.

Heutzutage können Sie Ihre Website in Google Cloud auch bei Hosting-Anbietern wie Siteground oder Kinsta hosten. Auf diese Weise können Sie ein global verteiltes Netzwerk nutzen und gleichzeitig Ihre Schriftarten lokal hosten.

Wenn Sie sich nicht entscheiden können, können Sie auch testen, welche Lösung für Ihren speziellen Anwendungsfall besser geeignet ist. Richten Sie eine Testwebsite mit lokal gehosteten Google-Schriftarten und eine andere ein, die die Schriftarten von Google CDN lädt, und vergleichen Sie die Ladezeiten von Seiten mit einem Leistungsanalyse-Tool wie Lighthouse oder GTMetrix.

Wenn Sie Ihrer WordPress-Site Google Fonts hinzufügen möchten, lesen Sie auch das Tutorial von Jessica Thornsby hier auf Tuts+.

  • WordPress
    So fügen Sie WordPress neue Schriftarten hinzu
    Jessica Thornsby

Weitere Inspiration für Web-Schriftarten

Schauen Sie sich diese Tutorials und Design-Beiträge an, wenn Sie noch mehr Inspiration für Web-Schriftarten suchen:

  • Schriftarten
    25+ kostenlose SVG-Schriftarten (Schriftdateien jetzt herunterladen)
    Nona Blackman
  • Web-Typografie
    Eine Anleitung zum Auswählen benutzerdefinierter Schriftarten für Ihre Website
    Eric Karkovack
  • Schriftarten
    Die 10 besten dekorativen Schriftarten für Ihre Website
    Eric Karkovack
  • Typografie
    5 Aufmerksamkeitsstarke Web-Schriftarten zum Herunterladen und Verwenden
    Eric Karkovack
  • Schriftarten
    Variable Schriftarten im Web, erklärt
    Kezz Bracey
  • Web-Typografie
    So verwenden Sie Farbschriftarten im Web
    Kezz Bracey
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.