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 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.
- Besuchen Sie den Google Webfonts Helper und suchen Sie nach der gewünschten Schriftart.
- Wählen Sie die notwendigen Zeichensätze und Stile, die Sie benötigen.
- Wählen Sie die Browser aus, die Sie unterstützen möchten,
- Kopieren Sie den CSS-Code und fügen Sie ihn in das Stylesheet Ihrer Website ein.
Sie haben zwei Möglichkeiten:
- Beste Unterstützung: Sie erhalten diese Schriftartenformate: eot,woff,woff2,ttf,svg
- 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
- 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.
- 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.
- 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
- fonts
- 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?
