{"id":234024,"date":"2022-01-19T10:30:00","date_gmt":"2022-01-19T08:30:00","guid":{"rendered":"https:\/\/devowl.io\/?p=234024"},"modified":"2025-05-02T18:29:08","modified_gmt":"2025-05-02T16:29:08","slug":"google-fonts","status":"publish","type":"blog","link":"https:\/\/devowl.io\/de\/dsgvo-konform\/google-fonts\/","title":{"rendered":"Google Fonts lokal in WordPress einbinden! (DSGVO-konform)"},"content":{"rendered":"

What would the internet be like without web fonts? Definitely only half as beautiful! Web fonts – also known as web fonts or online fonts – have become an indispensable part of the World Wide Web. They are an indispensable element for web designers, but they are also of great use for bloggers and “normal” website operators.<\/p>\n

Eine der beliebtesten Bibliotheken f\u00fcr Online-Schriftarten ist Google Fonts. Tausende Webfonts sowie eine lizenzfreie Nutzung machen das Fonts-Projekt zu einer wertvollen Ressource im Internet.<\/p>\n<\/div><\/div>

\u26a0\ufe0f Aber Achtung!<\/strong> Web-Schriften von Google Fonts d\u00fcrfen innerhalb der EU nicht ohne Weiteres eingebunden werden.<\/p>\n

In diesem Artikel erf\u00e4hrst du, wie du eine Google-Font auf deiner Website identifizieren kannst und mega einfach DSGVO-konform lokal in deine WordPress-Website einbinden kannst.<\/p>\n<\/div><\/div>

<\/i><\/div>

Alles, was du rund ums Thema Webfonts<\/strong> wissen musst, haben wir dir in unserem Artikel Google Fonts & Co. in WordPress: Alles Wichtige zu Webfonts!<\/a> zusammengefasst.<\/p>\n<\/div><\/div><\/div>

\n<\/div><\/div>
<\/i><\/div>

Achtung: Dieser Artikel ist keine Rechtsberatung!<\/strong> Wir als Entwickler von WordPress Plugins und Auftragnehmer von Website Projekten haben uns intensiv mit dem Thema befasst. Jedoch sind wir weder Juristen noch k\u00f6nnen wir die Vollst\u00e4ndigkeit, Aktualit\u00e4t und Richtigkeit folgender Informationen garantieren. Lass dich im Zweifelsfall immer von einem Rechtsanwalt beraten.<\/p><\/p>\n<\/div><\/div><\/div>

Google Fonts und die DSGVO<\/h2>\n

Das Problem an Google Fonts ist Google. Wenn du ein aufmerksamer Leser unseres Blogs bist, solltest du bereits wissen, warum das blo\u00dfe Einbetten von Google Fonts in eine Website hinsichtlich Datenschutz problematisch ist.<\/p>\n

Kurz zusammengefasst:<\/strong> Google LLC. ist ein US-amerikanisches Unternehmen. Seit dem Kippen des Privacy Shields<\/strong> \u2013 einem Datenschutz-Abkommen zwischen der EU und den USA \u2013 darf die \u00dcbermittlung von Daten in die USA nicht einfach so geschehen. Das liegt daran, dass der EuGH das Datenschutzniveau der USA als mangelhaft befand. Seither darf die Daten\u00fcbertragung grunds\u00e4tzlich nur noch auf Basis der aktiven und informierten Einwilligung der betroffenen Person vonstattengehen.<\/p>\n

Au\u00dferdem ist nicht abschlie\u00dfend gekl\u00e4rt, ob Google die durch das Laden des Fonts gesammelten IP-Adressen (in der EU ein personenbezogenes Datum<\/a>) f\u00fcr z. B. werbliche Zwecke verwendet.<\/p>\n

Schlussfolgerung:<\/strong> S\u00e4mtliche Google-Dienste wie Google Maps, Google Analytics und Google Fonts darfst du nicht einfach so einsetzen, da sie beim Besuch deiner Website Daten des jeweiligen Besuchers an den Google-Server \u00fcbermitteln.<\/p>\n

Eine entsprechende Opt-in-Einwilligung<\/a> deiner Besucher kannst du ohne viel Aufwand mithilfe eines Consent Tools wie Real Cookie Banner<\/a> einfach einholen und verwalten.<\/p>\n<\/div><\/div>

<\/i><\/div>

In unserem Blog kannst du nachlesen, wie du Google Maps<\/a> und Google Analytics<\/a> DSGVO-konform in deine Website einbauen kannst.<\/p>\n<\/div><\/div><\/div>

Warum solltest du Google Fonts lokal einbinden?<\/h2>\n

Neben dem im vorherigen Abschnitt erl\u00e4uterten Datenschutz-Problem gibt es zwei weitere Vorteile, die daf\u00fcr sprechen, Google Webfonts lokal zu hosten.<\/p>\n

Keine Abh\u00e4ngigkeit von externen Servern<\/h3>\n

Although the responsibility lies entirely with you, this also has its positive sides: For example, you are not dependent on potential Google server problems. You also don’t have to worry about data being passed on to third parties – especially those based outside the EU. So you have full control!<\/p>\n

Optimierung der Ladezeit durch weniger heruntergeladene Fonts m\u00f6glich<\/h3>\n

Ein zweiter gro\u00dfer Vorteil des Selfhostings von Google Fonts (und Webfonts allgemein) ist die verbesserte Ladezeit der Website. Warum? Du kannst zum Beispiel mittels eines Typografie-Plugins wie OMGF<\/a> einstellen, dass nur von dir ben\u00f6tigte Fonts eines Themes \u2013 anstelle von allen \u2013 geladen werden.<\/p>\n<\/div><\/div>

Google Fonts spielend einfach lokal integrieren und hosten<\/h2>\n

Kommen wir zum Kernst\u00fcck: Wir zeigen dir jetzt, wie du Google Fonts lokal in deine Website einbinden kannst, wenn Themes oder Plugins diese bereits in deiner Website eingebunden haben. Und das ganz ohne eine Zeile Code schreiben zu m\u00fcssen \ud83d\ude0e<\/strong><\/p>\n<\/div><\/div>

\"OMGF<\/a><\/div>

Hierf\u00fcr ben\u00f6tigst du lediglich das WordPress Fonts-Plugin OMGF<\/a>. Es kommt noch besser: Setzt du OMGF ein, sparst du dir das Einholen von Einwilligungen, da keine Daten mehr an Dritte \u00fcbertragen werden m\u00fcssen, um die Google Font zu laden. Das Webfonts-Plugin tr\u00e4gt also dazu bei, deine WordPress-Website DSGVO-sicher zu machen.<\/p>\n

And now we’ll show you how to use the font plugin. You can get the plugin in a free basic version and a PRO version for a fee. We recommend that you get the PRO version. The reason for this is that important functions are only available in the PRO version – but it is worth it and saves you the tedious and technically demanding manual hosting. In the following, you will see exactly what we mean by this.<\/p>\n

    \n
  1. \u00d6ffne dein WordPress-Backend.<\/li>\n
  2. Gehe zu Plugins > Installieren<\/em>.<\/li>\n
  3. Suche nach \"OMGF\". Installiere und aktiviere das Plugin anschlie\u00dfend. Wichtig:<\/strong> Die PRO-Version kannst du nur installieren, sofern du die kostenlose Version installiert und aktiviert hast. Nachdem du die PRO-Version gekauft hast, erh\u00e4ltst du eine ZIP-Download-Datei. Diese l\u00e4dst du unter Plugins > Installieren > Plugin hochladen<\/em> hoch und gibst den Lizenzschl\u00fcssel ein.<\/li>\n
  4. That’s it. OMGF starts working immediately after activation and exchanges your Google Fonts.<\/li>\n<\/ol>\n

    Wie \u00fcberpr\u00fcfe ich, ob OMGF funktioniert?<\/h3>\n

    To check whether the Google Fonts are actually no longer loaded by the Google server, let’s take a look at the whole thing using a before-and-after comparison.<\/p>\n

    In unserem Beispiel benutzen wir das Theme Divi<\/a>. Du kannst aber auch mit jedem anderem Theme pr\u00fcfen, ob OMGF korrekt arbeitet.<\/p>\n

    Wie sieht es aus, wenn OMGF noch\u00a0NICHT aktiv ist?<\/strong><\/p>\n

      \n
    1. Go to the front end of your WordPress website – for example, to the homepage.<\/li>\n
    2. Mache einen Rechtsklick auf eine beliebige freie Stelle und w\u00e4hle Inspect<\/em> bzw. Untersuchen<\/em> in deinem aus (in Google Chrome).<\/li>\n
    3. Klicke auf den Reiter Sources<\/em>.<\/li>\n<\/ol>\n<\/div><\/div>
      \"Entwicklerkonsole<\/a><\/div>

      Hier findest du ganz links die verschiedenen Server, von denen Dateien geladen werden. Zwei dieser Server hei\u00dfen fonts.googleapis.com<\/em> und fonts.gstatic.com<\/em>. Klappe diese sowie deren Unterordner auf. Hier kannst du dir CSS-Dateien und Schriftarten anzeigen lassen, die in diese Unterseite deiner Website eingebunden sind.<\/p>\n

      In unserem Fall ist das zum Beispiel die Google Fonts Poppins<\/em>.<\/p>\n

      Wie sieht es aber aus, wenn OMGF\u00a0aktiv IST?<\/strong><\/p>\n

      Gehe genauso vor wie gerade eben. F\u00e4llt dir etwas auf? Korrekt, wie du siehst, ist der Eintrag fonts.gstatic.com<\/em> verschwunden. Gleichzeitig wird deine Website trotz in sch\u00f6nen Schriftarten dargestellt. Das WordPress Schriftarten-Plugin OMGF war also flei\u00dfig.<\/p>\n<\/div><\/div>

      \"Entwicklerkonsole<\/a><\/div>

      Des Weiteren schauen wir uns im Folgenden einmal genauer an, was genau das Plugin gemacht hat. Gehe hierzu in deinem WordPress Backend in der linken Men\u00fcleiste zu Einstellungen > Optimize Google Fonts.<\/em><\/p>\n<\/div><\/div>

      \"OMGF<\/a><\/div>

      Jetzt bist du in den Einstellungen von OMGF. Da das Plugin technisch sehr detailliert ist, haben wir wichtige Einstellungen bereits in einem anderen Artikel \u00fcber das DSGVO-konforme Einbinden von Webfonts<\/a> erkl\u00e4rt.<\/p>\n

      An dieser Stelle wird deutlich, weshalb die PRO-Version ratsam ist. Der Optimierungsmodus<\/strong> ist in manual<\/em> (manuell) und automatic<\/em> (automatisch) aufgeteilt. In der kostenlosen Version steht dir nur die Funktion manual zur Verf\u00fcgung. Im Gegensatz zur PRO-Version werden bei Basis-Version werden dadurch nicht alle verwendeten Google Schriftarten vom Scanner erfasst.<\/p>\n

      OMGF zeigt dir an, welche Fonts eingebunden sind. Du kannst jetzt manuell noch einstellen, welche Fonts-Varianten nicht geladen oder vorgeladen werden sollen, da sie nicht in deiner Website vorkommen. Wie genau du verwendete Schriftarten ganz einfach herausfinden kannst, zeigen wir dir im n\u00e4chsten Abschnitt.<\/p>\n<\/div><\/div>

      Wie finde ich heraus, welche Fonts verwendet werden?<\/h2>\n<\/div><\/div>
        \n
      1. Mache einen Rechtsklick auf eine beliebige freie Stelle und w\u00e4hle Inspect<\/em> bzw. Untersuchen<\/em>\u00a0aus (in Google Chrome).<\/li>\n
      2. Klicke diesmal auf Elements<\/em>.<\/li>\n<\/ol>\n

        On the far left, two elements next to Elements, you will find an icon that looks like a rectangle with a cursor. This element is a so-called “picker” that helps you to analyse certain elements on your website.<\/p>\n<\/div><\/div>

        \"Entwicklerkonsole<\/a><\/div>

        You can now hover over any element on your website and a window will appear above it. This allows you to quickly identify the font used. In this window you can see which fonts the element is composed of. In our example, you can see in the window that this element uses the Google font “Poppins”.<\/p>\n

        Um zus\u00e4tzlich festzustellen, um welche Font-Variante es sich handelt, klickst du das entsprechende Element einmal an. Deine Entwicklerkonsole springt nun in das Element rein (markierte Zeile). In der rechten Spalte daneben werden dir die dazugeh\u00f6rigen CSS-Anweisungen angezeigt.<\/p>\n<\/div><\/div>

        \"Elemente<\/a><\/div>

        Klicke auf die Tab Computed<\/em>.<\/p>\n

        Unter \"Computed\" fallen jene Anweisungen, die schlussendlich effektiv angewendet werden. Scrolle runter bis zum Eintrag font-family<\/code>.<\/p>\n<\/div><\/div>

        \"Entwicklerkonsole<\/a><\/div>

        Abgesehen von dem Eintrag font-family<\/code> (Schriftart) sind auch die Eintr\u00e4ge font-weight<\/code> (Breite der Schrift; z.B. fett) und font-style<\/code> (falls vorhanden: z. B. kursiv) interessant. Auf diesem Weg kannst du nun auf der gesamten Website verwendete Schriftarten ermitteln und dir diese merken.<\/p>\n

        Mit diesem erlangten Wissen kannst du jetzt wieder in die Einstellungen von OMGF wechseln. Scrolle nach unten, bis du zur Einstellung Optimierte Schriftarten verwalten<\/em> gelangst. Das Fonts-Plugin zeigt dir an dieser Stelle alle gefundenen Fonts an \u2013 so auch Poppins. Nicht ben\u00f6tigte Poppins-Varianten kannst du easy peasy in OMGF exkludieren, indem du das H\u00e4kchen bei Nicht laden<\/em> f\u00fcr alle Poppins-Varianten, die nicht verwendet werden. In unserem Beispiel ben\u00f6tigen wir nur die Schriftbreite 500<\/code>.<\/p>\n

        Das tr\u00e4gt ma\u00dfgeblich zur Suchmaschinenoptimierung<\/strong> deiner Website bei, da die Ladegeschwindigkeit durch das Wegfallen von nicht ben\u00f6tigten Fonts verbessert wird. Du kannst also Google Fonts einbinden, ohne deine SEO-Ma\u00dfnahmen zu beeintr\u00e4chtigen. Und das lokal gehostet ganz datenschutzkonform!<\/p>\n

        Umgedreht l\u00e4uft das Ganze auch super. M\u00f6chtest du, dass eine bestimmte Schriftvariante vorl\u00e4dt, kannst du das H\u00e4kchen bei Vorladen<\/em> setzen. Somit wird diese Google-Fonts so fr\u00fch wie m\u00f6glich beim Aufbau deiner Website geladen.<\/p>\n<\/div><\/div>

        \"Scanner<\/a><\/div>

        Eine weitere relevante Einstellung ist Teilemengen erzwingen<\/em>. Dieser Funktion ist allerdings nur in der PRO-Version verf\u00fcgbar. Hier kannst du festlegen, welche Schriftzeichen geladen werden sollen. Sprichst du eine Zielgruppe in Deutschland an, empfiehlt sich nur Latin und Latin Extended zu verwenden und beispielsweise kyrillische und chinesische Schriftzeichen auszuschlie\u00dfen, sodass nur ben\u00f6tigte Schriftzeichen geladen werden und die Ladezeit nicht negativ beeinflusst wird.<\/p>\n

        Important: Don’t forget to save your changes \ud83d\ude09<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>","protected":false},"author":1,"featured_media":235008,"template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"Host Google Fonts locally in WordPress! (GDPR compliant)","_seopress_titles_desc":"Learn how you can integrate Google Fonts into your WordPress website in a GDPR-compliant way - easily and quickly!","_seopress_robots_index":"","inline_featured_image":false,"restrictTranslations":["en_US","de_DE"],"footnotes":""},"class_list":["post-234024","blog","type-blog","status-publish","has-post-thumbnail","hentry","content-cluster-gdpr-compliant"],"acf":[],"_links":{"self":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/blog\/234024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":26,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/blog\/234024\/revisions"}],"predecessor-version":[{"id":241883,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/blog\/234024\/revisions\/241883"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/media\/235008"}],"wp:attachment":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/media?parent=234024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}