Google Fonts und DSGVO: Urteil des Landgerichts München vom 20.01.2022

Siehe auch unsere Anleitung: https://docs.zeta-producer.com/webfonts-selbst-hosten.html

Hallo Stefan S.,

ich habe nun nach dieser Anleitung https://docs.zeta-producer.com/webfonts-selbst-hosten.html

Meine benötigten Google Fonts selber gehostet.

Abgesehen vom Datenschutz, haben sich die Lagezeiten zusätzlich noch einmal verbessern.

Aber eine Sache möchte ich noch gern abstellen und weiß nicht wie?

Wenn ich jetzt einen Check per https://pagespeed.web.dev/ bekomme ich folgenden Fehler angezeigt:

Warnungen: Lighthouse konnte nicht automatisch den `font-display`-Wert für den Ursprung https://www.shout-fm.de prüfen.

Wie kann ich diese Warnung abstellen?

Hallo,

wenn man im Lighthouse-Bericht auf eine solche Warnung klickt, werden weitere Hinweise dazu eingeblendet. Ich denke das könnte weiterhelfen.

Hallo,

das habe ich gemacht dort wird angezeigt:

Verwenden Sie die CSS-Funktion font-display, damit der Text für Nutzer sichtbar ist, während Webfonts geladen werden. Weitere Informationen.FCPLCP

Wie kann ich das korrigieren ?

Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt

Bei den Google Fonts hatte ich Anfangs auch diese Fehlermeldung und konnte das mit "font-display: swap;" lösen!

Aber wie kann man für shariff "font-display: swap;" einfügen / ändern?

Klicken Sie doch mal auf den Link "Weitere Informationen", da siehrt man sogar ein Beispiel, wie man die entsprechende Zeile ins CSS einfügt…

Hallo Stefan S.,

das habe ich gelesen bevor ich hier eine Frage poste.

Als Hobby Webmaster stößt man doch bei bestimmten Themen immer wieder an seine Grenzen.

Unter Informationen wird ein Beispiel Code angezeigt.

Ich müsste ja für diese beiden:

…shariff/fa-brands-400.woff2

…shariff/fa-solid-900.woff2

Denn Beispiel Code anpassen und bei CSS eintragen

Nur mit dem Anpassen habe ich so meine Probleme kann mir da ein Experte der ein hilfsbereiter User hier im Forum helfen?

Pacifico & Pacifico-Regular müsste ich ja korrekt ersetzen aber womit?

url/ kann ich durch meinen Speicherort ersetzen das ist soweit klar

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

Hallo,

wenn Sie nach unserer Anleitung vorgegangen sind, dann haben Sie das entsprechende CSS ja in Schritt 2 bereits in "Einstellungen > CSS" eingefügt. Hier müssten Sie vermutlich in jedem @font-face{} Block lediglich die Zeile font-display: swap; hinzufügen.

Hallo,

das habe ich ja bereits so gemacht aber scheinbar fehlt mir da etwas für

…shariff/fa-brands-400.woff2

…shariff/fa-solid-900.woff2

Welche Google Fonts benötige ich für die Shariff zusätzlich?

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/roboto-v29-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v29-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-display: swap;
  font-style: italic;
  font-weight: 300;
  src: local(''),
       url('fonts/roboto-v29-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v29-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('fonts/roboto-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-display: swap;
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('fonts/roboto-v29-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v29-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* oswald-300 - latin */
@font-face {
  font-family: 'Oswald';
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/oswald-v41-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/oswald-v41-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/oswald-v41-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/oswald-v41-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* oswald-600 - latin */
@font-face {
  font-family: 'Oswald';
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('fonts/oswald-v41-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/oswald-v41-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* oswald-700 - latin */
@font-face {
  font-family: 'Oswald';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('fonts/oswald-v41-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/oswald-v41-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Ah, Shariff. Das kommt vom Shariff-Widget und da nutzen wir externen Code, den wir nicht verändern sollten. Das würde ich zunächst also einfach mal ignorieren.

Dafür kann man keinen Code ins CSS schreiben damit font-display: swap; eingeschaltet ist?

Beispiel:

/* Font Awesome 5 Brands */

@font-face {

font-display: swap;

Zitat von Dexxa

Dafür kann man keinen Code ins CSS schreiben damit font-display: swap; eingeschaltet ist?

Das Problem ist, dass der Code von extern kommt und wir dann bei jedem externen Update die Änderung nachziehen müssten. Ich bin auch unsicher, ob "swap" hier die richtige Strategie ist. Bei "swap" wird initial ein Fallback-Font genutzt (z.B. Arial) und nachdem der Font geladen ist, wird dann der Fallback-Font durch den richtigen ersetzt. Das bedeutet, dass Sie ggf. für einen kurzen Moment statt der Icons eigenartige Zeichen sehen würden, die dann nach einem Moment ersetzt werden. Das möchten wir ja nicht, oder?

Okay, da haben Sie nun auch wieder Recht, nein das wollen wir nicht, stimmt!

Okay dann bleibt es so und ich höre auf weiter zu optimieren

Danke für die Unterstützung

Ich hab nun mal ein Online-Update für das Shariff-Widget für 16.3 veröffentlicht, das dem CSS ein font-display: block; hinzufügt. Vielleicht freut sich ja Lighthouse darüber. Wenn nichts, können wir auch nichts weiter tun. Sollte in ca. 30 Minuten verfügbar sein.

Das ist Mega

jetzt freut sich ja Lighthouse darüber.

Vielen lieben Dank dafür @ Stefan S.

PS: seit dem erreicht meine Seite manchmal 100 für Computer und 93 Mobil (je nach Server Auslastung)