HowTo: GoogleFonts richtig einbinden.
Update 2023: Es gibt positive Neuigkeiten für alle, die von der GoogleFonts-Abmahnwelle Mitte/Ende 2022 betroffen waren: Der Abmahner verliert möglicherweise seine Anwaltszulassung und wer bereits gezahlt hatte, kann vielleicht sogar auf Entschädigung hoffen. Lest euch da bitte selbst mal ein, wenn es euch die Mühe wert ist. Hier ein Einstieg: T3N | Abmahnung wegen Google Fonts – Razzia bei Berliner Anwalt
Die DSGVO ist jetzt ein paar Jahre alt. Die jüngste Entscheidung in Sachen EU-US Privacy Shield ist zwei Jahre her. Wenn ich die aktuelle Zunahme von Anfragen zu dem Thema richtig interpretiere, geht es in Deutschland so langsam mit den Abmahnungen wegen falscher GoogleFonts-Einbindungen los. Hintergrund: Wer Website-Besucher die benötigten Schriftarten direkt von den Servern von GoogleFonts laden lässt, liefert deren Daten damit potentiell bei jedem Seitenaufruf Google frei Haus. Da hilft es vor dem Gesetz auch nicht, wenn GoogleFonts & Konsorten einem hoch und heilig versprechen, diese Daten zu verwerfen.
Nun ist das Problem auch in meinem Freundeskreis eingeschlagen und ich sollte helfen. Ich dachte erst daran, ein kurzes Screenrecording zu GoogleFonts & transfonter zu machen. Ach, was solls, ich hab‘ heut nix zu tun – mache ich also mal diesen Blogpost darüber fertig, der hier rumliegt.
Schritt 1: Fonts nicht von extern einbinden
Manchmal der schwierigste Teil an der ganzen Geschichte. In der WordPress-Welt gibts leider einige Anbieter von Plugins und Themes, die noch wie selbstverständlich Fonts von Google laden, weil sie unter einem Stein leben aufs Nachladen einer eigenen Schriftart bestehen. Und nicht alle bieten eine laienfreundliche Option, um das abzustellen, damit die auf dem eigenen Server gehostet werden kann. Da ist man der Qualität des Supports leider ziemlich ausgeliefert.
Die Standard–WordPress Themes machens richtig und sind von Anfang an rechtssicher, indem sie Kopien der Schriftarten enthalten, die benutzt werden sollen. Viele andere Themes versuchen zumindest, Rechtssicherheit als Option in den Menüs anzubieten: Avada zum Beispiel hat einen ‚Google Fonts Mode‘, den man auf ‚local‘ stellen kann. Elementor hat ein ganz brauchbares Menü für Fonts.
Am besten wäre es ja eigentlich, wenn man sich nicht erst durch irgendwelche Theme-Menüs klicken müsste, die man seit Jahren nicht mehr gesehen hat, sondern einfach mit den automatischen Updates auf einen rechtssicheren Stand gebracht werden würde. Wer dann die die Vorzüge des Google Fonts-CDNs in Anspruch nehmen will, kann ja immer noch das eigene Rechtsrisiko für sich einschätzen und dann in die Optionen gehen. Leider scheinen die Anbieter vieler Plugins und Themes das bisher anders gesehen zu haben.
Schritt 2: Fonts „lokal“ einbinden (self-hosted Fonts)
Schritt 2.1: Fontdateien auftreiben
Beispiel: GoogleFonts
Im Grunde muss man nur irgendwoher die Schriftdateien holen.
Schritt 2.2: Fontdateien konvertieren für maximale Kompatibilität
Beispiel: mit transfonter.org
Schritt 2.3: Fontdateien hochladen & CSS @font-face Regel einsetzen.
Beispiel: In einem WordPress-Theme
FAQ
GoogleFonts und transfonter, das sind so viele Klicks. Geht das nicht einfacher?
Ja: https://google-webfonts-helper.herokuapp.com/fonts
Woran erkenne ich, dass ich alles richtig gemacht habe?
Zum Beispiel über das Network-Tab der Devtools. Falls dir das nichts sagt: Dieses Tool hier hat sich in zwei Stichproben ebenfalls bewährt: https://sicher3.de/google-fonts-checker/
Kann ich nicht einfach GoogleFonts durch BunnyFonts ersetzen?
Nein. Und nach allem was ich weiß (again, Not A Lawyer) ist es eine gewagte These von denen, sich als rechtssichere Alternative darzustellen.
Woanders weiterlesen
Ein wenig mehr über die rechtliche Situation:
https://complianz.io/google-fonts-and-gdpr-does-it-work/
Wie der CSS-Teil funktioniert:
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
Warum so und nicht anders:
https://css-tricks.com/snippets/css/using-font-face-in-css/
Warum überhaupt so viele Formate:
https://transfonter.org/formats