Google-Fonts: wie die Fonts identifizieren, die von einer Seite geladen werden!?

Member
Hallo u. guten Tag, :)

heut geht es um das Thema Google-Fonts:

also konkret um die dynamische Einbindung der kostenfreien Schriftarten-Datenbank von „Google Fonts“.Dieser Dienst ist vor einiger Zeit ins Gerede gekommen. Denn viele Webseiten-betreiber setzen diesen Dienst ein. Aber bei der Verwendung dieser Services übermittelt die IP-Adresse des Seitenbesuchers an Google.

Dies allerdings ist kritisch zu sehen: Denn genau genommen wird die Übermittlung eines „personenbezogenen Datums“ in diesem Vorgang gesehen; Und wenn man das unter dem Blickwinkel der DSGVO sieht - also der Datenschutzgrundversorgung - dann wird deutlich dass hier für diesen Vorgang es der Zustimmung des Nutzers Bedarf. Und wenn diese Zustimmung nicht vorliegt, dann kann es für den Webseitenbetreiber schnell schwierig werden. Achso: Es gibt ein Urteil, auf das sich oftmals berufen wird: Die Abmahner bzw. Absender von Schadenersatzforderungen berufen sich auf ein Urteil vom Landgericht München vom 20.02.2022 (Aktenzeichen 3 O 17493/20).

Frage - wie testet ihr eure Webseiten

a. mit einer Untersuchung der Browser-Entwicklertools
b. mit anderen Methoden - etwa mit diesem Tool
das Tool ::

---....mit dem kann man auch die Website checken.

Fragt sich nur ob hiermit alle Fonts entdeckt werden?
Habt ihr hier Erfahrungen gemacht.Werden mit dem Tool - tatsächlich alle Google-Fonts auf einer zu untersuchenden Webseite entdeckt!?

Grüße Tanger :)

ein kleines update:.....ich hab noch ein weiteres Tool entdeckt: ,,, jetzt sind das zwei:

Mit diesem Tools zum Beispiel kann man arbeiten:

a. ccm19.de


zeigt die Google-Fonts und darüber hinaus auch noch
#.... Weitere kritische Ergebnisse der Seite:
#... etwa wenn ungefragt kein Cookie gesetzt wird
oder aber wenn Daten von x fremden Domains eingebunden werden.. usw. usf

b. ferner noch diese Seite: sicher3.de

naemlich:



wenn man dann identiftziert hat, welche Fonts hier von Google kommen, dann kann man diese von Google holen:

ich halte hier das Tool für sehr hilfreich:

wie her bemerkt wird:

Und deine benötigte Schrift herunterzuladen, gibst du einfach in das Suchfeld (oben links in der Ecke) die gewünschte Schrift ein. Danach wählst du die jeweiligen Zeichensätze und Schriftschnitte aus. Unter dem Punkt 3 solltest du noch den Dateipfad angeben, indem du die Schriften später auf deinen Server laden solltest. Das kleine Tool wird die CSS Datei dahingehend anpassen.

also das Tool hier:

3. Copy CSS: (default is Best Support)
Modern Browsers
Choose Best Support if old browsers still need to be supported. Formats in this snippet: [eot,woff,woff2,ttf,svg]

Code:
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

und nun lässt sich noch der Pfad anpassen: Customize folder prefix (optional):

Code:
../fonts/

ehe es dann zum Download kommt...
Click on code to select all statements, then copy/paste it into your own CSS file.

Wenn man das dann heruntergeladen hat und alles auf den eigenen Server geladen hat - dann muss man noch die CSS auf der Webseite anpassen.

die Schriftarten noch in eigene CSS einbinden. Und genau dafür hat uns ja das oben erwähnte Google Webfonts Helper Tool im Grunde schon den nötigen CSS Code besorgt - den konnten wir (wie oben ja beschrieben) customized und angepasst herunterladen.

Nun kommt es darauf an, genau diesen Code einfach in die style.css-Datei einzubinden. Es ist meines Erachtens wichtig, dass wir - wenn wie auch ein Child-Theme verwenden, dann das auch die entsprechenden Änderungen auch nach dem Update deines WordPress-Themes machen.


Abschließend: es gibt verschiedene Methoden und Ansätze die Fonts lokal zu hosten
ohne Plugin - oder mit Plugin

a. ohne Plugin:


1. Google Fonts lokal in WordPress nutzen



2. How to Host Google Fonts Locally in WordPress? (2 Methods)


3. google-webfonts-helper: Get eot, ttf, svg, woff and woff2 files + CSS snippet


4. How to Host Google Fonts Locally in WordPress?


5. In-Depth Guide on Hosting Local Fonts in WordPress


6. How To Easily Host Google Fonts Locally In WordPress



b. mit Plugin:

google-fonts: Local Google Fonts By EverPress


Version:0.19 Last updated:2 weeks ago Active installations:70,000+ WordPress Version:4.6 or higher Tested up to:6.1.1


Hoffe, die Infos helfen ...

hier noch abschließend ein paar Anmerkungen zu den Pfaden beim lokalen Hosten der Fonts.
vorweg: es ist clever, ein Child-Theme einzusetzen:

Eine der gebräuchlichsten Methoden zum Laden lokal gehosteter Schriftarten ist die Deklaration der Schriftart im Design-Stylesheet,
obwohl es (wie immer) andere Möglichkeiten gibt: Der Verweis auf sie könnte mit der folgenden Pfadanpassung erfolgen.

Code:
/wp-content/themes/my_theme/assets/fonts/die_Custom_Font.ttf

Dies könnte ein typischer Dateispeicherort und Referenzierungsansatz sein: Und außerdem - die beste/empfohlene Vorgehensweise ist, ein untergeordnetes Thema zum Erstellen des Themes zu erstellen.

a. Wenn sich die CSS-Datei und die Font-Datei genau im selben Ordner befinden:

Code:
@font-face {
font-family: "die_Custom_Font";
src: url('die_Custom_Font.ttf');
}

Wenn die fonts sich nicht im css-Ordner befinden:

Code:
@font-face {
font-family: "die_Custom_Font";
src: url('../die_Custom_Font.ttf');
}

....und hier noch ein paar weitere Hinweise, Anmerkungen:

a. im sogenannten absoluten statischen Pfad der fonts file*/ @font-face


/* hier haben wir einen so genannten absoluten statischen Pfad des
Code:
fonts file*/
@font-face {
font-family: "die_Custom_Font";
src: url('file:///C:/Users/Administrator/fonts/die_Custom_Font.ttf');
}

b. ein anderer absoluter statischer Pfad des Font Ordners / @font-face

Code:
/* Url-Pfad der fonts Dateien*/
@font-face {
font-family: "die_Custom_Font";
src: url('http://localhost/wordpress/der-font-ordner-pfad/die_Custom_Font.ttf');
}

wie gesagt: es ist clever, ein Child-Theme einzusetzen:


Schoene Sonnntagabend noch an alle. ;)

update: und wers mit einem Plugin lösen will: hier die mini-Auswahl


OMGF | GDPR/DSVGO Compliant, Faster Google Fonts. Easy.

Von Daan from Daan.dev
info:
Version: 5.4.3
Zuletzt aktualisiert: vor 3 Wochen
Aktive Installationen: 200.000+
WordPress-Version: 4.6 oder höher
Getestet bis: 6.1.1
PHP-Version: 7.0 oder höher
Schlagwörter: cache DSVGO fonts GDPR google

ratings: 163 x 5 Sterne

Use Any Font | Custom Font Uploader
By Dnesscarkey ::

info:
Version: 6.2.9
Last updated: 3 weeks ago
Active installations: 200,000+
WordPress Version: 3.0 or higher
Tested up to: 6.1.1
Tags: custom fontsfont uploader typography

ratings: 944 x 5 Sterne

Local Google Fonts
By EverPress ::

Host your used Google fonts on your server and make your site more GDPR compliant
info:
Version: 0.19
Last updated: 4 weeks ago
Active installations: 70,000+
WordPress Version: 4.6 or higher
Tested up to: 6.1.1
Tags: fonts GDPR google google fonts

ratings: 54 x 5 Sterne

update am 23.12.22

es gib so kurz vor Weihnachten - denke ich mal mit Sicherheit auch noch ein paar richtig gute Nachrichten.
hier ein interessanter Artikel auf Spiegel-Online:
die Original-Pressemitteilung:

Viele Grüße u. einen schönen Einstieg euch allen in das Weihnachtswochenende
 
Zuletzt bearbeitet:

Online-Statistiken

Zurzeit aktive Mitglieder
0
Zurzeit aktive Gäste
279
Besucher gesamt
279

Neueste Themen

Beliebte Forum-Themen

X
Keine passende Antwort gefunden?