Google Fonts Einbinden

Google Fonts

Google Fonts ist eine Bibliothek mit kostenlosen Schriftarten, die Sie auf Ihren Webseiten verwenden können. Mit über 800 verschiedenen Schriftarten zur Auswahl ist Google Fonts eine großartige Möglichkeit, Ihrer Website oder App Persönlichkeit und Glanz zu verleihen. Sie können auf Ihrer Website verwenden ohne sich um Lizenzbeschränkungen kümmern zu müssen und ist die Verwendung von Google Fonts völlig kostenlos! Sie müssen keine Schriftartendateien herunterladen, da die Schriftarten von den Google-Servern bereitgestellt werden. So können Sie schöne Websites erstellen, ohne sich um Lizenzgebühren oder Kompatibilitätsprobleme kümmern zu müssen. Darüber hinaus werden Google Fonts automatisch für das Web optimiert, so dass sie schnell geladen werden und auf jedem Gerät gut aussehen. Wenn Sie nach einer einfachen Möglichkeit suchen, das Design Ihrer Website zu verbessern, sollten Sie Google Fonts unbedingt ausprobieren.

In diesem Artikel führen wir Sie in die Grundlagen von Google Fonts ein und zeigen Ihnen, wie Sie sie auf Ihrer Website verwenden können.

Google Fonts

Google Fonts einbinden

Lernen Sie jetzt Google Fonts einbinden und downloaden DSGVO konform für Top Pagespeed ohne Performance Verluste. Die Nutzung von Google Fonts führt schnell zu Performance Einbußen und wer eine hohe Punktzahl bei GTmetrix erreichen möchte wird die Art und Weise wie man Google Fonts einbindet überarbeiten müssen. Die einzige Möglichkeit, dieses Performance Problem zu lösen, besteht darin, zu lernen, wie man Google-Schriften lokal hosten kann.

Die meisten Menschen sind mit Google Fonts vertraut, diejenigen, die es nicht sind, folgt eine kuze Einleitung:

Google Fonts ist eine große, kostenlose und großartige Webfont Bibliothek, die Sie jeder frei nutzen kann. Die Webfont Library wird von Google verwaltet und auf den Domains fonts.gstatic.com und fonts.googleapis.com bereitgestellt.

Die Zwei häufigsten Möglichkeiten, die Google WebFont Library in Ihrer Website einzubinden sind:

  • Standard (Link rel= Methode): Sie fügen den Link zur Webfont in den Head- oder Kopfbereich Ihrer Website ein. Zum Beispiel: header.php für WordPress.
  • @import: Mit dieser CSS @import Rule fügen Sie Code in Ihr Stylesheet style.css ein.

Diese beiden Optionen eignen für Entwicklungs- und Produktionsumgebungen, persönlich verwenden ich sie nur für zur Entwicklung. Wie bereits erwähnt, ist unser Problem mit GTmetrix. Ich wollte die höchstmögliche Punktzahl erreichen, gleichzeitig stehe ich vor diesen beiden Problemen:

Beide zeigten einen Link zu den Google Fonts, die wir nutzen. Das ist der folgende: https://fonts.googleapis.com/css?family=Roboto+Condensed:400,600

Ihre Google Fonts downloaden

Zur Lösung benötigt man Zugriff auf die Datei der Webfont. Der Google Fonts Download ist einfach und erfordert nur wenige Schritte. Alles, was Sie dazu benötigen, ist ein Zugang zu Ihrem Hoster bzw. Webserver und ein Texteditor. Zum Download empfehlen wir den Google Webfonts Helper von Mario Ranftl zu nutzen. Dieser stellt das notwendige CSS für Sie bereit.

  1. Besuchen Sie den Google Webfonts Helper und suchen Sie nach der gewünschten Schriftart.
  2. Wählen Sie die notwendigen Zeichensätze und Stile, die Sie benötigen.
  3. Wählen Sie die Browser aus, die Sie unterstützen möchten,
  4. Kopieren Sie den CSS-Code und fügen Sie ihn in das Stylesheet Ihrer Website ein.

Sie haben zwei Möglichkeiten:

  1. Beste Unterstützung: Sie erhalten diese Schriftartenformate: eot,woff,woff2,ttf,svg
  2. Moderne Browser: Sie erhalten diese Schriftformate: woff,woff2

Google Fonts DSGVO konform einbinden

Das folgende Beispiel ist die Schriftart Open Sans mit Unterstützung für alle Browser: Bitte vergewissern Sie sich, dass Sie das richtige Verzeichnis für die Dateien der Schriftarten angeben.

  • Laden Sie die .zip-Datei Ihrer Schriftart herunter. Dekomprimieren Sie es und laden Sie die Schriftart Dateien auf Ihren Server.

Und das war’s schon. Die Schriftart, die Sie gewählt haben, wird von Ihrem Server geladen.

Tipps für die Verwendung von Google Fonts

  1. Verwenden Sie die Google Fonts API: Mit der Google Fonts API können Sie Schriftarten dynamisch auf Ihrer Website oder Ihrem Blog laden. Das bedeutet, dass Sie angeben können, welche Schriftarten geladen werden sollen, und diese werden dann bei Bedarf heruntergeladen. So können Sie Bandbreite sparen und die Ladezeiten der Seite verbessern.
  2. Verwenden Sie font-display: Mit der CSS-Eigenschaft font-display können Sie steuern, wie die Schriftarten auf Ihrer Website oder Ihrem Blog dargestellt werden. Standardmäßig werden Schriftarten mit einem Fallback-System gerendert, das zu flackerndem oder unsichtbarem Text führen kann. Wenn Sie font-display auf „swap“ oder „optional“ setzen, können Sie die Darstellung Ihrer Schriftarten verbessern, ohne die Ladezeiten der Seite zu beeinträchtigen.
  3. Verwenden Sie font-face: Mit der CSS-Regel @font-face können Sie Schriftarten auf Ihrer Website oder in Ihrem Blog einbetten. Das bedeutet, dass Sie jede beliebige Schriftart verwenden können, auf die Sie Zugriff haben, ohne sich auf die Google Fonts API oder die Einstellungen für die Schriftdarstellung verlassen zu müssen.

Google Fonts per WordPress-Plugin einbinden

Wenn Sie noch einen Schritt weiter gehen möchten, können Sie dies in ein Site Specific WordPress-Plugin umwandeln.

Google Fonts lokal mit einem WordPress-Plugin hosten: Um dies zu einem Site Specific WordPress Plugin zu machen, stellen Sie sicher, dass Sie zuerst eine Reihe von Ordnern und Unterordnern erstellen, die ähnlich wie der unten beschriebene aussehen und der gleichen Struktur folgen:

  • google-fonts-lokal/
    • google-fonts-lokal.php
  • assets
    • fonts
      • open-sans-v15-latin-regular.eot
      • open-sans-v15-latin-regular.woff2
      • open-sans-v15-latin-regular.woff
      • open-sans-v15-latin-regular.ttf
      • open-sans-v15-latin-regular.svg
    • css
      • google-fonts-lokal.css
  • Legen Sie alle Schriften, die Sie in heruntergeladen haben, in den Ordner /fonts
  • Erstellen Sie innerhalb des Ordners google-fonts-lokal die Datei google-fonts-lokal.php und schreiben Sie diese hinein:
  • Erstellen Sie innerhalb des Ordners CSS eine Datei und nennen Sie sie google-fonts-lokal.css. Schreiben Sie darin den CSS-Code, den Sie in Schritt 3 erhalten haben
  • Zippen Sie alles zusammen und laden Sie es als neues Plugin hoch. Aktivieren Sie es und das war’s.

google-webfonts-helper

A Hassle-Free Way to Self-Host Google Fonts: google-webfonts-helper.herokuapp.com/fonts

Google Web Font Loader

Der Web Font Loader ist eine JavaScript-Bibliothek, die Ihnen mehr Kontrolle über das Laden von Schriften bietet als die Google Fonts API. Mit dem Web Font Loader können Sie auch mehrere Anbieter von Webschriften verwenden. Sie wurde gemeinsam von Google und Typekit entwickelt.

Die Dokumentation und der Quellcode für den Web Font Loader sind in einem GitHub-Repository verfügbar.