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

WIE MAN GOOGLE FONTS GDPR-KONFORM MACHT
4 Kommentare / How-To’s, WordPress / 4. April 2020 / 6 Leseminuten
Was zur H├Âlle hat ein Burger mit GDPR und Google Fonts zu tun? Nun, das werdet ihr gleich herausfinden!

Ich kann nicht glauben, dass ich das ├╝bersehen habe, aber seit der Einf├╝hrung der GDPR ist die Verwendung von Google Fonts ein bisschen schwierig geworden. Mal sehen, was wir dagegen tun k├Ânnen.

Zun├Ąchst einmal hoffe ich, dass dieser Blogpost Sie bei guter Gesundheit findet. Der Corona-Virus verbreitet sich wie ein Lauffeuer und betrifft alle und alles: Menschen, Beziehungen, Unternehmen. Ich hoffe aufrichtig, dass Sie und alle um Sie herum sich vollst├Ąndig erholen werden. Gesundheitlich, geistig und k├Ârperlich, aber auch finanziell.

Nun aber zur├╝ck zum Thema.

Oh-oh, was hat Google getan?!
Keine Sorge. So schlimm ist es nicht. So funktioniert das Internet nun mal, und Google wird Sie in keiner Weise beruhigen.

Sehen Sie, keine gro├če Sache.

Wie das Internet funktioniert
Wenn Sie eine Website besuchen, fordern Sie in Wirklichkeit ein Dokument an, das Ihnen vom Server zur Verf├╝gung gestellt wird. Diese Anforderung erfolgt ├╝ber eine URL, die wie folgt aussieht:

[protocol] :// [pretty-name-pointing-to-a-server-IP-address] . [tld] / [path] / [to] / [document]

Ich bin sicher, ein Beispiel aus der realen Welt wird Ihnen vertrauter vorkommen:

https :// myawesomewebsite . com / hobbies / my-awesome-hamsters

Indem Sie die obige Adresse anfordern, teilen Sie dem Server im Grunde mit: Hallo Server! Ich habe gerade Dateien von myawesomewebsite.com ├╝ber eine sichere Verbindung (https) angefordert. Ich m├Âchte das Dokument mit dem Namen „my-awesome-hamsters“ in einem Ordner mit dem Namen „hobbies“ anzeigen.

Burger und Pommes
Lassen Sie uns das Internet mit einem Restaurant vergleichen. Ein sehr modernes und ultracooles Restaurant, in dem die Bestellungen direkt am Tisch aufgegeben werden, ohne dass ein Kellner oder eine Kellnerin eingreifen muss.

Ihr Freund bestellt einen Burger mit Pommes frites, aber Sie z├Ąhlen Kalorien, also nehmen Sie nur einen Salat und einen XXL Banana/Oreo Milkshake.

Damit der Kellner wei├č, wo er Ihr Essen servieren muss, ist es erforderlich, dass Sie bei jeder Bestellung Ihre Tischnummer angeben. Klingt logisch, oder?

Nun, um das R├Ątsel zu vervollst├Ąndigen:

Tischnummer = IP-Adresse des Computers,
Kellner = Diener (denn sie servieren ja auchÔÇŽ),
Bestellung = Anfrage,
Essen = Dokument,
Und deine Freundin – nun, ich hoffe, sie ist immer noch deine Freundin.
Lassen Sie uns den letzten Satz umformulieren:

Damit der Server wei├č, wo er Ihr Dokument zustellen soll, muss er bei jeder Anfrage Ihre IP-Adresse angeben. Ergibt Sinn, oder?

Kommen wir nun zur├╝ck zu Google Fonts.

GDPR und Google-Fonts

Ein Dokument kann von sich aus andere Ressourcen anfordern, z. B. Bilder und – Trommelwirbel, bitte! – Google Fonts, die sich auf einem anderen Server befinden.

Stellen wir uns vor, die Pommes frites Ihres Freundes werden mit zus├Ątzlichen P├Ąckchen Mayonaise und Ketchup geliefert, die von einem anderen ultramodernen Restaurant auf der anderen Stra├čenseite – praktischerweise mit dem Namen „Le G├│og“ – handgemacht wurden.

Damit der Kellner auf der anderen Stra├čenseite wei├č, wo er die P├Ąckchen servieren muss, wird Ihre Tischnummer direkt nach Ihrer Bestellung an Le G├│og ├╝bermittelt.

Das bedeutet, dass Ihre IP-Adresse an Google weitergegeben wird. alle pers├Ânlich identifizierbaren Informationen ohne die ausdr├╝ckliche Erlaubnis des Nutzers, d. h. ohne einen Cookie-Hinweis, nicht weitergegeben werden d├╝rfen.

Was Google dagegen unternimmt
„Gl├╝cklicherweise hat Google „viel“ Zeit und „M├╝he“ investiert, um uns zu versichern, dass sie nicht vorhaben, irgendetwas mit unseren Daten zu tun.

Dies ist, was ihre FAQ dar├╝ber zu sagen hat:

Die Google Fonts API wurde entwickelt, um die Sammlung, Speicherung und Verwendung von Endnutzerdaten auf das zu beschr├Ąnken, was f├╝r die effiziente Bereitstellung von Schriftarten erforderlich ist. [ÔÇŽ] Google Fonts protokolliert Aufzeichnungen der CSS- und Schriftdateianfragen, und der Zugriff auf diese Daten ist sicher.

Eine sch├Âne Aussage, die einige schwierige, aber beruhigende Worte enth├Ąlt, die einen etwas beruhigt und – v├Âllig paranoid – zur├╝cklassen.

Mit anderen Worten: Sie tun nichts dagegen.

Fairerweise muss man sagen, dass sie die IP-Adresse nicht ignorieren k├Ânnen, weil das Internet nun einmal so funktioniert. Aber das Mindeste, was sie tun k├Ânnten, w├Ąre, zu versichern, dass sie sie nicht f├╝r etwas anderes verwenden. Stattdessen sagen sie, dass sie die Daten zwar aufzeichnen, aber an einem sehr, sehr sicheren Ort.

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.

Warum Google Fonts verwenden?
Es gibt Tausende von Schriftarten-Repositories im Internet. Was genau macht Google Fonts so besonders?

Sehen Sie, wie Kinsta im Vergleich zur Konkurrenz abschneidet.

Erstens: Er ist kostenlos! Au├čerdem werden Google Fonts von Google verwaltet und bereitgestellt, was bedeutet, dass sie garantiert sicher sind. Nat├╝rlich gibt es viele fragw├╝rdige Websites, auf denen Sie kostenlose Schriftarten herunterladen k├Ânnen, aber wer wei├č, was Sie sich mit diesen Dateien noch alles einfangen?

Auch die Qualit├Ąt der Schriftarten auf solchen Websites kann manchmal fragw├╝rdig sein.

Google hat eine Auswahl von ├╝ber tausend hochwertigen Schriftarten zusammengestellt. Wenn Sie kein Grafikdesigner mit einem perfekten Auge f├╝r Typografie sind, ist dies die sicherere Wahl.

Zweitens gibt es keine umst├Ąndlichen Lizenzierungsbeschr├Ąnkungen. Alle Schriften im Google Fonts-Katalog sind quelloffen und k├Ânnen in kommerziellen Projekten kostenlos verwendet werden. Sie k├Ânnen sie herunterladen oder auf Ihrer Website einbetten, und Sie k├Ânnen sie sogar in Druckprojekten verwenden.

Obwohl es keine einheitliche Lizenz gibt, verwenden die meisten Schriftarten im Repository die Open Font License.

Open Font-Lizenz.
Andere „kostenlose Schriftarten“ sind selten kostenlos und werden mit einer ganzen Reihe verwirrender Lizenzbeschr├Ąnkungen geliefert, die Sie bei einem Fehler in Teufels K├╝che bringen k├Ânnen. Leider sind Google Fonts nicht mit demselben Problem behaftet.

Und schlie├člich ist es m├╝helos m├Âglich, Google Fonts ├╝ber die Google Fonts API zu Ihrer Website hinzuzuf├╝gen. Alternativ k├Ânnen Sie sie auch einzeln herunterladen und per FTP/SFTP auf Ihren Webserver hochladen.

Google Fonts sind zwar in der Regel einfach und vielleicht nicht so auff├Ąllig wie einige kostenpflichtige Schriftarten, aber sie sind auf jeden Fall besser als die websicheren Schriftarten, die auf den meisten Betriebssystemen vorinstalliert sind und die jeder schon tausendmal gesehen hat.

Es gibt 1052 verschiedene Google-Schriftfamilien, die kostenlos erh├Ąltlich sindÔÇŽ f├╝hlen Sie sich schon ├╝berw├Ąltigt?

Google Fonts Einbinden und Downloaden mit dem Google Webfont Helper. Google Fonts DSGVO konform einbinden mit Top Pagespeed ┬╗

Google Fonts