WordPress: Google Fonts lokal einbinden

Inhalt

Hier gibt es einen WordPress Tool-Tip!

Wie kann man Google Fonts lokal einbetten? Aus aktuellem Anlass haben wir hier ein kleines Tutorial zusammen gestellt, dass euch helfen soll Google Fonts in WordPress lokal einzubetten, anstatt sie über den Google Fonts Server auszuliefern.

Warum Google Fonts einbetten?

Die WKO NÖ hat Anfang Juli 2022 ihre Mitglieder darüber per Newsletter darüber informiert, dass es zu Abmahnungen kommen kann, wenn man Google Fonts auf der eigenen Website über den Google-Fonts Server lädt, was bei vielen Webseiten der Fall ist. Wenn die Schriften über den Google Server bereit gestellt werden, werden Personen-bezogene Daten (IP-Adresse) an Google zurück geliefert und es lässt sich nicht nachvollziehen, was Google mit den Daten macht. Dazu wäre eine Einwilligung des Users notwendig, was in der Regel nicht eingeholt wird.

Dem kann man vorbeugen, indem man die Fonts direkt auf die WordPress Webseite hochlädt bzw. einbettet. ODER man verzichtet komplett auf Google Fonts und nützt Systemschriften wie Verdana, Tahoma, Georgia etc.

UND SO GEHT DAS …

1. Backup

Die Umstellung der Fonts ist ein größerer Eingriff auf eurer Website. Bitte vor dem Loslegen unbedingt ein aktuelles Backup der gesamten Website anlegen!

2. Tutorial folgen …

Wir benötigen Ihre Zustimmung um den Inhalt von YouTube laden zu können.

Mit dem Klick auf das Video werden durch den mit uns gemeinsam Verantwortlichen Youtube [Google Ireland Limited, Irland] das Video abgespielt, auf Ihrem Endgerät Skripte geladen, Cookies gespeichert und personenbezogene Daten erfasst. Damit kann Google Aktivitäten im Internet verfolgen und Werbung zielgruppengerecht ausspielen. Es erfolgt eine Datenübermittlung in die USA, diese verfügt über keinen EU-konformen Datenschutz. Weitere Informationen finden Sie hier.

ICAmbHQ7ZGl2IGNsYXNzPSZxdW90O2JybGJzLWNtcG50LWNvbnRhaW5lciBicmxicy1jbXBudC1jb250ZW50LWJsb2NrZXIgYnJsYnMtY21wbnQtd2l0aC1pbmRpdmlkdWFsLXN0eWxlcyZxdW90OyBkYXRhLWJvcmxhYnMtY29va2llLWNvbnRlbnQtYmxvY2tlci1pZD0mcXVvdDt5b3V0dWJlLWNvbnRlbnQtYmxvY2tlciZxdW90OyBkYXRhLWJvcmxhYnMtY29va2llLWNvbnRlbnQ9JnF1b3Q7UEdsbWNtRnRaU0IzYVdSMGFEMGlOVFl3SWlCb1pXbG5hSFE5SWpNeE5TSWdjM0pqUFNKb2RIUndjem92TDNkM2R5NTViM1YwZFdKbExXNXZZMjl2YTJsbExtTnZiUzlsYldKbFpDOVVXV0p1UlRkVk1WOHRRU0lnZEdsMGJHVTlJbGx2ZFZSMVltVWdkbWxrWlc4Z2NHeGhlV1Z5SWlCbWNtRnRaV0p2Y21SbGNqMGlNQ0lnWVd4c2IzYzlJbUZqWTJWc1pYSnZiV1YwWlhJN0lHRjFkRzl3YkdGNU95QmpiR2x3WW05aGNtUXRkM0pwZEdVN0lHVnVZM0o1Y0hSbFpDMXRaV1JwWVRzZ1ozbHliM05qYjNCbE95QndhV04wZFhKbExXbHVMWEJwWTNSMWNtVWlJR0ZzYkc5M1puVnNiSE5qY21WbGJqMGlJajQ4TDJsbWNtRnRaVDQ9JnF1b3Q7Jmd0OyZsdDtkaXYgY2xhc3M9JnF1b3Q7YnJsYnMtY21wbnQtY2ItcHJlc2V0LWMgYnJsYnMtY21wbnQtY2IteW91dHViZSZxdW90OyZndDsgJmx0O2RpdiBjbGFzcz0mcXVvdDticmxicy1jbXBudC1jYi10aHVtYm5haWwmcXVvdDsgc3R5bGU9JnF1b3Q7YmFja2dyb3VuZC1pbWFnZTogdXJsKCYjMDM5O2h0dHBzOi8vZ3JhZmlrd2llbi5jb20vd3AtY29udGVudC91cGxvYWRzL2JvcmxhYnMtY29va2llLzEveXRfVFlibkU3VTFfLUFfaHFkZWZhdWx0LmpwZyYjMDM5OykmcXVvdDsmZ3Q7Jmx0Oy9kaXYmZ3Q7ICZsdDtkaXYgY2xhc3M9JnF1b3Q7YnJsYnMtY21wbnQtY2ItbWFpbiZxdW90OyZndDsgJmx0O2RpdiBjbGFzcz0mcXVvdDticmxicy1jbXBudC1jYi1wbGF5LWJ1dHRvbiZxdW90OyZndDsmbHQ7L2RpdiZndDsgJmx0O2RpdiBjbGFzcz0mcXVvdDticmxicy1jbXBudC1jYi1jb250ZW50JnF1b3Q7Jmd0OyAmbHQ7cCBjbGFzcz0mcXVvdDticmxicy1jbXBudC1jYi1kZXNjcmlwdGlvbiZxdW90OyZndDtTaWUgc2VoZW4gZ2VyYWRlIGVpbmVuIFBsYXR6aGFsdGVyaW5oYWx0IHZvbiAmbHQ7c3Ryb25nJmd0O1lvdVR1YmUmbHQ7L3N0cm9uZyZndDsuIFVtIGF1ZiBkZW4gZWlnZW50bGljaGVuIEluaGFsdCB6dXp1Z3JlaWZlbiwga2xpY2tlbiBTaWUgYXVmIGRpZSBTY2hhbHRmbCZhdW1sO2NoZSB1bnRlbi4gQml0dGUgYmVhY2h0ZW4gU2llLCBkYXNzIGRhYmVpIERhdGVuIGFuIERyaXR0YW5iaWV0ZXIgd2VpdGVyZ2VnZWJlbiB3ZXJkZW4uJmx0Oy9wJmd0OyAmbHQ7YSBjbGFzcz0mcXVvdDticmxicy1jbXBudC1jYi1wcm92aWRlci10b2dnbGUmcXVvdDsgaHJlZj0mcXVvdDsjJnF1b3Q7IGRhdGEtYm9ybGFicy1jb29raWUtc2hvdy1wcm92aWRlci1pbmZvcm1hdGlvbiByb2xlPSZxdW90O2J1dHRvbiZxdW90OyZndDtNZWhyIEluZm9ybWF0aW9uZW4mbHQ7L2EmZ3Q7ICZsdDsvZGl2Jmd0OyAmbHQ7ZGl2IGNsYXNzPSZxdW90O2JybGJzLWNtcG50LWNiLWJ1dHRvbnMmcXVvdDsmZ3Q7ICZsdDthIGNsYXNzPSZxdW90O2JybGJzLWNtcG50LWNiLWJ0biZxdW90OyBocmVmPSZxdW90OyMmcXVvdDsgZGF0YS1ib3JsYWJzLWNvb2tpZS11bmJsb2NrIHJvbGU9JnF1b3Q7YnV0dG9uJnF1b3Q7Jmd0O0luaGFsdCBlbnRzcGVycmVuJmx0Oy9hJmd0OyAmbHQ7YSBjbGFzcz0mcXVvdDticmxicy1jbXBudC1jYi1idG4mcXVvdDsgaHJlZj0mcXVvdDsjJnF1b3Q7IGRhdGEtYm9ybGFicy1jb29raWUtYWNjZXB0LXNlcnZpY2Ugcm9sZT0mcXVvdDtidXR0b24mcXVvdDsgc3R5bGU9JnF1b3Q7ZGlzcGxheTogaW5oZXJpdCZxdW90OyZndDtFcmZvcmRlcmxpY2hlbiBTZXJ2aWNlIGFremVwdGllcmVuIHVuZCBJbmhhbHRlIGVudHNwZXJyZW4mbHQ7L2EmZ3Q7ICZsdDsvZGl2Jmd0OyAmbHQ7L2RpdiZndDsgJmx0Oy9kaXYmZ3Q7Jmx0Oy9kaXYmZ3Q7IA==

3. Überprüfung Google Fonts lokal

Wie im Video erwähnt könnt ihr über Webpagetest überprüfen, ob eure Website Fonts über den Google Server lädt. Es gibt noch ein 2. Tool, das im Video nicht erwähnt ist und nur das prüft: https://sicher3.de/google-fonts-checker/

4. Plugin zum Unterdrücken

Ein Plugin haben wir auch entdeckt, da in manchen Fällen der Code alleine nicht gereicht hat.
Es heißt “Disable and Remove Google Fonts” du kannst es >> hier runterladen<<

Einfach hochladen und aktivieren, mehr ist damit nicht zu tun.

… oder … Code zur Unterdrückung des Google Font Servers

Anbei der im Video erwähnte Code zur Unterdrückung des Aufrufes des Google Font Servers:

// module enqueued google fonts
// https://docs.wpbeaverbuilder.com/beaver-builder/developer/how-to-tips/load-google-fonts-locally-gdpr/
// Google_Fonts_lokal.txt
add_filter( 'fl_builder_google_fonts_pre_enqueue', function( $fonts ) {
    return array();
} );

// takes care of theme enqueues
add_action( 'wp_enqueue_scripts', function() {
    global $wp_styles;
    if ( isset( $wp_styles->queue ) ) {
        foreach ( $wp_styles->queue as $key => $handle ) {
            if ( false !== strpos( $handle, 'fl-builder-google-fonts-' ) ) {
                unset( $wp_styles->queue[ $key ] );
            }
        }
    }
}, 101 );