Google Fonts illegal ?!

Google Fonts illegal blau

Was nun?

Am 20.01.2022 wurde vom Landesgericht München ein entscheidendes Urteil gesprochen: Unterlassungsanspruch und Schadensersatz (hier 100 €) wegen Weitergabe von IP-Adresse an Google durch Nutzung von Google Fonts.

Link zum Urteil: https://rewis.io/urteile/urteil/lhm-20-01-2022-3-o-1749320/

Achtung Abmahnung

Wer Google Fonts weiterhin nutzt, kann abgemahnt werden!

Mit dem Google Fonts Scanner von eRecht24 kannst du prüfen, ob du Google Fonts richtig eingebunden hast: Prüfen Sie jetzt die Einbindung von Google Fonts

Was kannst du tun, um die Weitergabe der IP-Adresse an Google durch Google Fonts zu verhindern?

Die Antwort ist ganz einfach: Du kannst die benötigten Fonts lokal in deine WordPress Installation einbinden. Dann sendet sie keine Daten mehr an Google.

Ich kann dir helfen, deine Google Fonts DSGVO-konform in deine Webseite einzubauen.

Du kannst die Fonts auch selbst lokal in deine Webseite einbinden.

Im Folgenden findest du 3 Anleitungen, wie du es mit Elementor, Elementor Pro und Divi machen kannst.

Die meisten Fonts kannst du bei fonts.google.com herunterladen. Eine andere seriöse Quelle für lizenzfreie Fonts ist fontsquirrel.com. Die kommen in der Regel als ttf- oder otf-Dateien.

Elementor (gratis-Version)

Für die gratis-Version von Elementor benutze ich das Plugin „Custom Fonts“ von Brainstormforce (gibts bei wordpress.org) Dazu brauchst du die Webfonts. Die kannst du aus den ttf-Dateien mit dem Generator von Font Squirrel in die Web-Formate woff und woff2 umwandeln und sie dann in die Mediathek deiner WordPress-Seite laden. Von dort kannst du sie in „Custom Fonts“ einpflegen.
Die Fonts sind dann nur in mit Elementor gebauten Seiten verfügbar, es sei denn, du nimmst das ASTRA-Theme. Da kannst du „Custom Fonts“ ins Theme einbauen.

Eine Schritt-für-Schritt Anleitung findest du hier:

Elementor Pro

Bei Elementor Pro brauchst du kein Plugin. Im Dashboard unter „Elementor“ findest du „Custom Fonts“. Da kannst du die Schriften anlegen und hochladen. Über den Theme-Builder sind dann die Fonts auf der ganzen Webseite verfügbar.

Eine detaillierte Anleitung findest du hier:

Divi

Bei Divi kannst du ganz einfach die ttf-Dateien hochladen. Dazu musst du aber erst Uploads aller Dateien erlauben. Wenn du nicht programmieren willst, kannst du einen kleinen Trick benutzen, den ich im unten verlinkten Video zeige. Oder du fügst folgenden Eintrag in deine wp-config.php ein:
define( ‚ALLOW_UNFILTERED_UPLOADS‘, true );

Hier die Anleitung für Divi:

Transkript: Google Fonts mit Elementor gratis lokal einbinden

Warum ist das wichtig Google Fonts lokal in deine Webseite einzubinden? Schauen wir uns die Webseite in Google Chrome an. Wir klicken die rechte Maustaste und gehen auf Untersuchen. Hier schauen wir uns Sources an, das ist oben rechts. Hier sehen wir fonts.google.com. Das heißt, die Webseite sendet Informationen an Google und das ist nicht DSGVO-konform.

Deshalb werden wir die Schriften, die du auf deiner Webseite brauchst, in deine Webseite einbauen, damit du Google Fonts DSGVO-konform verwenden kannst. Bevor du einen Font in deine Website einbaust, stelle sicher, dass der Schrift-Typ lizenzfrei ist. Wenn man bei Google Fonts einen Font anklickt, dann gibt es hier oben im Tab Licence und da kann man dann lesen, ob die frei ist und hier steht, dass sie kommerziell und auch anderweitig benutzen kannst. Dies wäre also ein lizenzfreier Font.

Du kannst natürlich auch andere Fonts einbauen, deren Lizenz du käuflich erworben hast.

Google Fonts herunterladen

Als erstes brauchen wir die Fonts, die wir uns ausgesucht haben. Die laden wir am besten bei Google runter. Dazu öffnen wir den Browser, gehen zu fonts.google.com. Hier gibt es eine ganze Menge Fonts, die können wir uns kostenlos herrunterladen können.

Ich möchte verschiedene Roboto-Fonts, eine ist schon hier; die anderen zeigt er weiter unten. Also geben wir in die Suchfunktion Roboto ein und dann werden mir vier Fonts von Roboto angezeigt. Davon will ich den Roboto, den Condensed und den Slab haben.

Also fangen wir mit dem Roboto an, den klicke ich an und da gibt es verschiedene Stilarten, die kann man nicht einzeln runterladen. Also lade ich die ganze Familie auf meinen Computer, die Datei speichern. Zuvor hatte ich mir einen Ordner Fonts angelegt und da sollen sie rein.

Dann gehen wir zurück, nehmen den nächsten – Roboto Condensed will ich noch haben. Runterladen. Speichern. Er kommt auch in diesen Ordner hinein. Dann noch mal zurück. Und den Slab brauche ich noch. Runterladen. Speichern. Soweit sind wir fertig.

So, dann haben wir die Stile und Fonts, die wir brauchen, auf unseren Computer geladen. Dann können wir den Browser zumachen und gehen in unseren Ordner rein. Um das Ganze besser zu organisieren, habe ich hier Unterordner für die verschiedenen Schriftarten angelegt. Da tun wir die rein Robot Condensed in Condensed, Roboto in Roboto und Slab in Slab. Dann öffnen wir den Ordner Roboto und müssen jetzt die Datei entpacken. Anschließend klicken wir auf Dateien anzeigen und das sind sie. Von dem Roboto brauche ich nur den Regulären. Der ist hier unten. Alle anderen kann ich löschen, damit ich da nicht durcheinanderkomme.

Dann gehen wir zurück machen das gleiche mit den anderen Roboto-Dateien. Vom Roboto Condensed möchte ich auch den 400-er, das ist der Regular, alle anderen kann ich entfernen. Dann haben wir noch Roboto Slab und machen das gleiche.das gleiche.
Mit dem Roboto Slab hat es irgendwie nicht geklappt. Da kommt irgendwelcher Quatsch. Das kann bei Google Fonts schon mal vorkommen. Also lösche ich das ganze.

Alternative zu fonts.google.com

Zum Glück noch eine alternative Webseite, die man nehmen kann, wenn fonts.google.com nicht funktioniert. Und zwar ist das fontsquirrel.com. Das ist auch eine sehr seriöse Webseite, wo man Fonts runterladen kann.

Hier kann man dann suchen: Roboto Slab. Da unten wird er schon angezeigt, den klicke ich an und kann ihn von dort runterladen. Dann gehen wir in den Ordner rein. Roboto Slab ist wieder eine zip-Datei. Die entpacken wir hier. Entpacken. Dateien anzeigen und es scheint, es stehen hier nur noch zwei Font-Größen zur Verfügung. Wir wollen Bold und Regular haben. Auch hier lösche ich wieder alle Dateien, die ich nicht brauche.
Dann können wir hier aus FontSquirrel schon wieder rausgehen.

Um das jetzt wieder einfacher zu gestalten, werde ich meine Fonts wieder alle zusammen in einen Ordner schieben. Darin sollten dann nur noch die vier Fonds sein, mit denen ich auf meiner Website arbeiten will.

ttf-Dateien in die Webfonts .woff und .woff2 umwandeln

Im nächsten Schritt werden wir die heruntergeladenen Fronts, das sind in diesem Fall ttf-Dateien, in Web-Fonts umwandeln. TTF-Dateien sind groß, etwa 170 Kilobyte, und brauchen daher relativ lang zum Laden. Deswegen werden wir sie in Web Fonts konvertieren. Das können wir bei FontSquirrel machen. Dazu rufen wir fontsquirrel.com auf und klicken dort auf Generator. Dorthin kannst du die Fonts laden, die du umwandeln willst.

Sobald die Fonts hochgeladen sind, wählen wir OPTIMAL und bestätigen, dass wir die Fonts legal erworben haben. Da wir lizenzfreie Fonts haben, ist das kein Problem. Dann klicken wir auf Download your Kit. Dann können wir die Datei mit den umgewndelten Fonts in unserem Ordner speichern. Da sind wir eigentlich hier schon fertig, können das Fenster wieder zumachen und sehen, dass wir in unserem Fonts-Ordner jetzt eine neue zip-Datei haben, die wir auspacken müssen. Danach entstehen eine ganze Menge neuer Dateien. Neben den ttf‘s gibt es hier jetzt auch woff- woff2-Dateien und andere. Wieder werde ich erst mal löschen, was ich nicht brauche, damit es ein bisschen übersichtlicher wird. Die Fonts und Web Fonts können wir dann in unsere Website laden und dort lokal einbinden.

Fonts und Web-Fonts in WordPress-Seite lokal einbinden

Nachdem wir die Schriften, die wir auf unserer Website verwenden wollen, auf unseren Computer geladen haben, loggen wir uns in unsere Website ein. Als nächstes müssen wir ein neues Plugin installieren, deswegen gehen wir hier auf Plugins, installieren. Der Name des Plugins heißt Custom Fonts. Das installieren und aktivieren wir. Als nächstes werde ich unsere Fonts vom Computer in die Medien der Webseite laden. Dazu können wir Datei hinzufügen, Dateien auswählen. Wir markieren all die Fonts, die wir haben wollen, und klicken öffnen. Dann verlassen wir die Medien, gehen unten zu Design und dann zu Custom Fonts. Hier werden wir unsere Fonts anlegen. Ich hatte als Ersten Roboto gewählt, dann wählen wir die Größe: Regular entspricht Normal 400. Nun müssen wir noch die Font-Dateien einpflegen. Also gehen wir auf Upload und jetzt müssen wir Roboto Regular finden. Den woff2 Roboto Regular anklicken und auswählen. Dann brauchen wir den Roboter Regular woff. Da muss man jetzt ein bisschen aufpassen, dass man nicht die Falschen anklickt. Dann können wir noch die ttf-Datei hier einbinden. Vom Roboto war das alles. Wir klicken Add New Font und damit haben wir ihn hier angelegt.

Als nächstes legen wir den Roboto Slab an. Da hatten wir den normalen, Normal 400, klicken das an und suchen uns die Dateien dazu. Da wir in diesem Fall eine zweite Stärke von benutzen wollen, klicken wir auf Add Font Variation. Die Felder sind dann schon ausgefüllt, aber das ist nur eine Kopie von dem, was wir vorher eingetragen haben. Wir müssen die Einträge ersetzen.

Wir wollen Bold 700 und suchen uns die Dateien dafür. Damit sind wir auch mit diesem Font fertig, Add New Font klicken und schon ist er angelegt.

Als letztes hatten wir den Roboto Condensed. Auch hier hatten wir den Normalen ausgesucht.

Das ist jetzt ein bisschen mühselig, weil wir jede Schrift, jede Schriftstärke einzeln anlegen müssen. Aber dafür werden wir dann DSGVO-konform sein.

Fonteinstellungen in Elementor vornehmen

Globale Schriftart

Als nächstes rufen wir eine Seite auf, die mit Elementor hergestellt wurde. In dem Fall ist es die Homepage. Klicken mit Elementor bearbeiten. Und hier gehen wir auf den Hamburger-Icon oben und klicken Website Einstellungen. Unter den Website Einstellungen wählen wir die globale Schriftart. Die müssen wir jetzt alle ändern, damit wir von den automatischen Google Fonts wegkommen. Wir klicken hier auf diesen blauen Bleistift

Primary: Was hier drin steht, das müssen wir ändern. Und zwar gehen wir ganz nach oben. Hier sind dann eigene Schriften. Hier suchen wir uns Robototo Slab und bestätigen das.

Die sekundäre Schrift ist auch eine andere. Die werden wir ändern. Und zwar wieder eigene Schriftarten, Roboto Slab und hier die Schriftart 400, das ist die normale, die hatten wir uns ausgewählt, wieder auf den Bleistift und zurück.

Beim Text haben wir Lato stehen. Es ist egal, was da steht, wir müssen unsere neue Schrift einbinden und hier wollte ich Roboto haben, die regulär ist 400. Wir gehen zurück, dann Accent. Hier ändern wir auch die Schrift. Und zwar wollte ich hier Roboto Condensed, Schriftschnitt 500 steht hier, wir haben regulär, das ist 400. Das stellen wir ein und speichern das Ganze.

Typografie kontrollieren

Wir schauen unten Typografie und kontrollieren, dass alle Einträge auf Vorgabe stehen.

Test in Google Chrome

Nachdem wir die Fonts lokal in Elementor angelegt haben, schauen wir im Google Chrome noch mal auf die Website. Wir laden die Seite neu und stellen fest: Unsere Seite feuert immer noch Google Fonts. Okay, jetzt darf man sich nicht verwirren lassen. Es besteht nämlich die Möglichkeit, dass irgendein Textelement immer noch Google Fonts ansteuert. Und das müssen wir dann suchen und ändern.

Wir gehen erst raus aus den Websiteeinstellungen, klicken dann auf ein Text Element nach dem anderen. Hier müssen wir jetzt kontrollieren, welches davon die falsche Font-Einstellung hat. Wir gehen auf Stil, wir gehen auf Typographie. Hier steht Vorgabe. Das ist okay. Dann das nächste Text-Element. Wir gehen auf Stil, wir gehen auf Typografie. Hier steht Noto Sans. Das müssen wir jetzt ändern. Dazu fahren wir ganz hoch bis zu unseren Custom Fonts und stellen da Roboto ein, speichern das ganze.

Dann checken noch einmal mit Google Chrome. Wir machen einen Reload – und weg sind die Google Fonts Einträge. Das heißt, wenn auch nur ein einziges Element auf der Website noch mit Google kommuniziert, gibt es Daten weiter. Wir müssen also sicherstellen, dass alle Elemente umgestellt sind, entweder auf Vorgabe oder auf unsere Custom Fonts.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Das könnte dich auch interessieren:

Archive