{"id":234838,"date":"2022-02-16T10:21:00","date_gmt":"2022-02-16T08:21:00","guid":{"rendered":"https:\/\/devowl.io\/?p=234838"},"modified":"2025-05-02T18:54:21","modified_gmt":"2025-05-02T16:54:21","slug":"webfonts-embed","status":"publish","type":"blog","link":"https:\/\/devowl.io\/de\/dsgvo-konform\/webfonts-einbinden\/","title":{"rendered":"So kannst du Webfonts in deine WordPress-Website einbinden!"},"content":{"rendered":"

You’ve found a really snazzy web font and want to integrate it into your website as easily, quickly and free of charge as possible? Or you have reached into your design bag of tricks and created a unique font with which you would like to decorate your website? Then you’ve come to the right place!<\/p>\n

In this article, you’ll learn how to quickly & easily add custom fonts to your website.<\/p>\n

Und los geht's \ud83d\udcaa<\/p>\n<\/div><\/div>

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

Warum sollte ich individuelle Schriftarten hochladen?<\/h2>\n

Online-Schriften sind ein wichtiges Hilfsmittel im Webdesgin, um einer Website das gewisse Etwas zu verleihen. Anders gesagt: Um sie h\u00fcbscher zu machen. Aber eine Webfont kann auch ma\u00dfgeblich zum Wiedererkennungswert der Website beitragen und auch eine positive Reputation st\u00e4rken. Abgesehen davon kann die Schriftart selbst zu einem USP (Alleinstellungsmerkmal) deiner Website werden.<\/p>\n

Jedoch solltest du darauf achten, dass die Web-Schrift gut lesbar ist und du nicht zu viele verschiedene auf deiner Website verwendest. Das kann n\u00e4mlich zur Folge haben, dass die Nutzererfahrung auf deiner Website negativ beeinflusst<\/strong> wird und infolgedessen die Absprungrate in die H\u00f6he schie\u00dft<\/strong>. Auch in puncto Suchmaschinenoptimierung kann es zu verlangsamten Ladezeiten kommen.<\/p>\n<\/div><\/div>

Wie binde ich eine individuelle Schriftart in meine Website ein?<\/h2>\n

Unfortunately, you cannot simply select web fonts in Google Fonts and embed them in your website – that would be too good to be true. This method is now obsolete within the EU as it is not privacy compliant.<\/p>\n

Webfonts und der Datenschutz<\/h3>\n

With Google Fonts, a connection would be established with the Google server every time the website is visited – and the Google fonts loaded in connection with this – and visitor data would be transferred to it accordingly.<\/p>\n

Das ist allerdings h\u00f6chst problematisch, insbesondere, da Google ein Unternehmen mit Sitz in den USA ist.<\/p>\n

Seit dem Ende des Datenschutz-Abkommens zwischen den USA und der EU (Privacy Shield<\/strong>) ist die \u00dcbertragung von Daten in die USA grunds\u00e4tzlich nicht erlaubt. Das liegt daran, dass die USA aus EuGH-Sicht als unsicheres Drittland mit mangelhaftem Datenschutzniveau gelten.<\/p>\n

In der Regel ben\u00f6tigst du hierf\u00fcr eine Opt-in-Einwilligung<\/a> deines Besuchers. Diese kannst du am unkompliziertesten mithilfe eines Cookie Banners, wie Real Cookie Banner<\/a>, einholen.<\/p>\n<\/div><\/div>

Webfonts herunterladen<\/h3>\n

Um Online-Schriftarten auf deiner Website verwenden zu k\u00f6nnen, musst du diese im ersten Schritt downloaden. Viele Online-Font-Bibliotheken wie Google Fonts<\/a>, Adobe Fonts<\/a>, dafont<\/a> und Font Squirrel<\/a> stellen zahlreiche kostenlose Schriften zur Verf\u00fcgung.<\/p>\n

Allerdings gibt es noch das freudige Thema Lizenzrecht. Denn einige kostenlose Fonts d\u00fcrfen nicht f\u00fcr die kommerzielle Nutzung verwendet werden. Auch gibt es Fonts, die kostenlos auf Desktop-Ger\u00e4ten verwendet werden d\u00fcrfen, aber als Webfonts kostenpflichtig sind. Daher lies dir unbedingt immer die Lizenzbestimmungen<\/strong> der jeweiligen Webfont durch!<\/p>\n<\/div><\/div>

Individuelle Schriftarten konvertieren<\/h3>\n

Bevor du etwa eine individuell erstellte oder heruntergeladene Schriftart in deine Website einbauen kannst, musst du diese in ein passendes Format umwandeln. \u00dcblicherweise gibt es ttf<\/code>- , woff<\/code>- und otf<\/code>- Dateien.<\/p>\n

Eine Font-Bibliothek, die einen kostenlosen Font-Generator zur Verf\u00fcgung stellt, ist Font Squirrel<\/a>. Wie genau du eine Schriftart in Font-Squirrel umwandelst, kannst du in unserem Artikel \u00fcber Webfonts<\/a>\u00a0nachlesen.<\/p>\n

Nachdem du die umgewandelte Datei heruntergeladen hast, kannst du sie entpacken und deine Font ist Web-ready.<\/p>\n<\/div><\/div>

Welches Plugin kann ich verwenden, um individuelle Schriftarten in WordPress hochzuladen?<\/h3>\n

Da es mittlerweile f\u00fcr so gut wie alles ein Plugin gibt, wirst du selbstverst\u00e4ndlich auch hier f\u00fcndig. Es gibt so einige Plugins, die dich dabei unterst\u00fctzen, deine erstellten und konvertierten Schriftarten easy peasy zu deiner WordPress-Website hinzuzuf\u00fcgen. Zwei Kandidaten stellen wir dir im Folgenden vor.<\/p>\n<\/div><\/div>

\"Use<\/a><\/div>

Use Any Font<\/h4>\n

Use Any Font<\/a> ist ein WordPress-Plugin, um eine individuelle Schrift schnell und ohne CSS-Kenntnisse hochladen zu k\u00f6nnen. Abgesehen davon bietet dir Use Any Font die M\u00f6glichkeit, bereits vordefinierte Schriftarten zu verwenden \u2013 unter anderem von Google Fonts, die du laut den Plugin-Herstellern auf deinem eigenen Server speichern kannst.<\/p>\n

Somit umgehst du die Daten\u00fcbertragung an den Google-Server, beziehungsweise in die USA, die als Drittland mit unzureichendem Datenschutzniveau gelten.<\/p>\n

Wie funktioniert Use Any Font nun genau?<\/p>\n

    \n
  1. Gehe in dein WordPress-Backend.<\/li>\n
  2. Klicke links in der Men\u00fcleiste auf Plugins > Installieren<\/em>. Gib in das Suchfeld \"Use Any Font\" ein.<\/li>\n
  3. Installiere und aktiviere das Plugin anschlie\u00dfend.<\/li>\n
  4. After the installation is complete, the plug-in is displayed in your menu on the left. Click on the menu item “Use Any Font”.<\/li>\n
  5. Jetzt bist du in der \u00dcbersicht. Hier wirst du gebeten, einen API-Schl\u00fcssel (API key) einzugeben, um das Plugin verwenden zu k\u00f6nnen. Wenn du es gekauft hast, hast du deinen Schl\u00fcssel bereits erhalten. Verwendest du das Font-Plugin in der kostenlosen Version, kannst du dir auch einen Schl\u00fcssel generieren lassen (Generate Free Lite\/Test API Key<\/em>). Vergiss nicht, anschlie\u00dfend auf Verify<\/em> zu klicken. Der API Key wird ben\u00f6tigt, um eine Verbindung mit dem Server des Plugin-Anbieters herzustellen, um die Konvertierung von Fonts zu erm\u00f6glichen.<\/li>\n<\/ol>\n<\/div><\/div>
    \"Use<\/a><\/div>
      \n
    1. Um eine Font hochladen zu k\u00f6nnen, klickst du auf den Reiter Upload Font. Hier siehst du die beiden Buttons Upload Fonts<\/em> und Add Predefined Fonts<\/em>.<\/li>\n<\/ol>\n

      Upload Fonts<\/strong><\/p>\n

      Hier kannst du eine Schriftart, die du vorher aus einer Schriftarten-Bibliothek \u2013 wie z.B. Google Fonts oder Font Squirrel \u2013 heruntergeladen hast, hochladen. Bedenke, dass du die heruntergeladene Datei entpackst, falls es sich um eine ZIP-Datei handelt. Der folgende Screenshot zeigt dir, wie eine entpackte Roboto-Schrift von Google Fonts aussieht.<\/p>\n<\/div><\/div>

      \"Fonts<\/a><\/div>

      Wie du siehst, werden dir verschiedene Styles der Schriftart Roboto zur Verf\u00fcgung gestellt. Zum Beispiel unterschiedliche Textbreiten (400 oder regular oder normal, 700 oder bold oder fett, 800 oder black oder extrs fett, etc.) oder Schrift-Stile (z.B. italics f\u00fcr kursiven Text).<\/p>\n

      W\u00e4hle einen Style aus und lade diesen hoch.<\/p>\n

      \ud83d\udc49 Wichtig:<\/strong> Nur folgende Formate sind erlaubt: ttf, otf, woff\u00a0<\/p>\n

      Unter Font Name<\/strong> kannst du deine Font benennen. Wir nennen unsere der Einfachheit halber roboto, so wie sie auf Google Fonts hei\u00dft. Wichtig: Das \"Black\" im Dateinamen steht f\u00fcr die Schriftbreite 800 und geh\u00f6rt nicht<\/strong> zum Namen der Schriftart.<\/p>\n<\/div><\/div>

      \"Font<\/a><\/div>

      Wie du oben im Screenshot sehen kannst, wurde die Schriftart erfolgreich hochgeladen. Allerdings wird sie noch nicht angezeigt. Wie genau du das anstellst, zeigen wir dir jetzt:<\/p>\n

        \n
      1. Klicke auf den Reiter Assign Font<\/em> und anschlie\u00dfend auf den gleichnamigen Button Assign Font<\/em>.<\/li>\n<\/ol>\n<\/div><\/div>
        \"Use<\/a><\/div>
          \n
        1. W\u00e4hle unter Select Font<\/em> die hochgeladene Font aus. In unserem Fall roboto.<\/li>\n
        2. Unter Select elements to assign<\/em>\u00a0kannst du nun ausw\u00e4hlen, wo \u00fcberall die Schriftart eingesetzt werden soll. Du kannst sie beispielsweise in einer Headline<\/em> (\u00dcberschrift) einsetzen. (Je kleiner die Zahl nach dem H ist, desto gr\u00f6\u00dfer ist die \u00dcberschrift.) Hier lohnt es sich zur Not auch einfach mal rumzuprobieren \ud83d\ude09<\/li>\n
        3. Wenn du alles zu deiner Zufriedenheit eingestellt hast, klicke unten auf den Assign Font<\/em>-Button.<\/li>\n<\/ol>\n

          Das Doofe ist, dass du deine vorgenommenen Einstellungen nicht mehr nachtr\u00e4glich \u00e4ndern kannst. Das einzige, was dir \u00fcbrig bleibt, ist die Font samt Einstellungen zu l\u00f6schen und erneut anzulegen.<\/p>\n

          Und hier kannst du das Ganze auch noch mal im Vorher-Nachher-Vergleich ansehen:<\/p>\n

          OHNE Use Any Fonts:<\/strong><\/p>\n<\/div><\/div>

          \"Fonts<\/a><\/div>

          MIT Use Any Fonts:<\/strong><\/p>\n<\/div><\/div>

          \"Fonts<\/a><\/div>

          Add Predefined Fonts<\/strong><\/p>\n

          W\u00e4hlst du diese Option in Use Any Font aus, kannst du Webfonts aus einer Vielzahl an bereits vordefinierten Fonts ausw\u00e4hlen. Du musst also nichts extra hochladen. Klicke hierzu einfach auf den Button Add Predefinded Fonts<\/em> und es \u00f6ffnet sich ein entsprechendes Fenster. Gef\u00e4llt dir eine Schrift, kannst du diese zu deiner Website hinzuf\u00fcgen, indem du rechts auf den Button Add To Your Site<\/em> dr\u00fcckst.<\/p>\n<\/div><\/div>

          \"Custom<\/a><\/div>

          Custom Font Uploader<\/h4>\n

          Custom Font Uploader<\/a> ist ein WordPress-Typografie-Plugin, das dir dabei hilft, Google-Schriftarten in deine Website zu integrieren. Dar\u00fcber hinaus kannst du auch individuell erstellte Schriftarten hochladen. Wie du solche Fonts konvertieren kannst, um sie in deine Website einbinden zu k\u00f6nnen, haben wir dir ja bereits erkl\u00e4rt \ud83d\ude07<\/p>\n

          Im Gegensatz zu Use Any Font ben\u00f6tigst du f\u00fcr die Verwendung von Custom Font Uploader keinen API-Key. Folglich bist du nicht von einem Server des Plugin-Herstellers abh\u00e4ngig. Alle Schriftarten werden laut der Entwickler auf dem Server des Website-Betreibers gespeichert, was hinsichtlich Datenschutzkonformit\u00e4t ein gro\u00dfes Plus ist, da keine Daten an Dritte \u00fcbertragen werden.<\/p>\n

          Und so verwendest du das Fonts-Plugin<\/strong><\/p>\n

            \n
          1. \u00d6ffne dein WordPress-Backend und gehe links im Men\u00fc zu Plugins > Installieren<\/em>.<\/li>\n
          2. Gib in das Suchfeld Custom Font Uploader<\/em> ein und installiere und aktiviere das Plugin.<\/li>\n
          3. Das Schriftarten-Plugin wird dir nun links im Men\u00fc als WB Plugins<\/em> angezeigt. Je nachdem, ob du eine Google Font oder individuelle Font hochladen m\u00f6chtest, w\u00e4hlst du hier entweder den Unterpunkt Google Fonts oder Upload Font<\/em> aus.<\/li>\n<\/ol>\n

            Let’s take a look at how you can upload a custom font:<\/strong><\/p>\n<\/div><\/div>

            \"Upload<\/a><\/div>
              \n
            1. Klicke auf Add Font<\/em> und w\u00e4hle die Schrift aus, die du hochladen m\u00f6chtest. Wir entscheiden uns f\u00fcr Roboto-Black<\/em>. Wichtig:<\/strong> Die Font hei\u00dft sp\u00e4ter exakt so, wie der Name der Font in deinen Dateien lautet. Das hei\u00dft, dass du den Dateinamen so benennen solltest, wie die font-family sp\u00e4ter hei\u00dfen soll.<\/li>\n
            2. For the following steps you have to dive into the CSS of your website – but don’t panic, we can do it together! \ud83e\udd17<\/li>\n
            3. Gehe in das Frontend deiner Website (z.B. auf die Startseite).<\/li>\n
            4. Mache auf eine beliebe frei Stelle einen Rechtsklick.<\/li>\n
            5. W\u00e4hle Inspect<\/em> bzw. Untersuchen<\/em> aus (in Google Chrome). Nun bist du in der ber\u00fchmt-ber\u00fcchtigten Entwicklerkonsole deiner Website gelandet.<\/li>\n<\/ol>\n<\/div><\/div>
              \"Entwicklerkonsole<\/a><\/div>
                \n
              1. Ganz links, zwei Reiter neben Elements<\/em> siehst du ein Symbol, das aussieht, wie ein Quadrat mit einem Cursor. Hierbei handelt es sich um den \"Picker\", mittels welchem du einzelne Elemente auf deiner Website ausw\u00e4hlen kannst. Klicke den Picker an.<\/li>\n
              2. In unserem Beispiel w\u00e4hlen wir die \u00dcberschrift WPDEV<\/em> mit dem Picker aus.<\/li>\n
              3. Unten rechts in der Entwicklerkonsole siehst du eine zweite Spalte mit den Eintr\u00e4gen Styles<\/em>, Computed<\/em> und Layout<\/em>.<\/li>\n
              4. Bleib in der Spalte Styles<\/em>.<\/li>\n
              5. Jetzt scrollst du so lange nach unten, bis du den Eintrag font-family<\/code> siehst.<\/li>\n<\/ol>\n<\/div><\/div>
                \"Change<\/a><\/div>
                  \n
                1. L\u00f6sche alles nach font-family:<\/code> raus und trage den Font-Namen deiner hochgeladen Font ein. Du siehst die \u00c4nderung direkt in der Live-Vorschau. (Das Problem hierbei ist,<\/strong> dass die \u00c4nderungen nach dem Aktualisieren der Seite nicht mehr angezeigt werden. Daher m\u00fcssen wir diese h\u00e4ndisch im CSS unserer Website konfigurieren.)<\/li>\n
                2. Schaue nach, wo du CSS in deiner WordPress-Installation hinterlegen kannst. In dem Standard-Theme findest du diese Funktion links im Men\u00fc unter Design > Customizer > Zus\u00e4tzliches CSS<\/em>.<\/li>\n
                3. Gehen wir jetzt einmal davon aus, dass du die hochgeladene Schrift (in unserem Fall Roboto<\/em>) f\u00fcr alle h1-\u00dcberschriften einsetzen m\u00f6chtest. In das CSS-Feld tr\u00e4gst du Folgendes ein:<\/li>\n<\/ol>\n

                  h1 {
                  \nfont-family: "Robotot-Black" !important;
                  \n}<\/code><\/p>\n

                  \ud83d\udc49Wichtig:<\/strong><\/span> W\u00fcrdest du das !important<\/code> weglassen, kann es passieren, dass die \u00c4nderung nicht \u00fcbernommen wird, da sie von einer wichtigeren Regel \u00fcberschrieben wird. Durch den Zusatz !important<\/code> priorisierst du deine neu hinzugef\u00fcgte Regel.<\/p>\n<\/div><\/div>

                  \"CSS<\/a><\/div>

                  Wenn du mutig bist, kannst du das Ganze auch ein St\u00fcck weiterf\u00fchren.<\/p>\n

                  Mithilfe des CSS kannst du den Style deiner Website ver\u00e4ndern (z.B. Schriftfarben und Abst\u00e4nde). Selbstverst\u00e4ndlich auch die Schriftart.<\/p>\n

                  Best of all, you don’t have to be a programming owl to add the following CSS to your WordPress website.<\/p>\n

                  # All elements on the website (*) should have the font \"Roboto-Black\". If not available, display them in Arial\r\n* {\r\n   font-familiy: \"Roboto-Black\", Arial;\r\n}\r\n\r\n\r\nh1, h2, h3, h4, h4, h5, h6 {\r\n   font-familiy: \"Roboto-Black Headline Font\", Arial;}\r\n<\/pre>\n
                  A comment is displayed behind the rhombus. This expresses that if the desired font “Roboto” cannot be loaded, Arial should be displayed instead.<\/p>\n
                  In addition, the desired font should be used in all specified h’s (h1,h2,h3, etc), i.e. headings, of the website.<\/p>\n
                  Wo finde ich das Custom CSS meiner Website?<\/strong><\/p>\n
                  Wo genau du das CSS deiner WordPress-Website findest, ist meistens Theme-abh\u00e4ngig. H\u00e4ufig findest du es aber im Customizer deiner Website. Den Customizer findest du oben links in der Frontend-Ansicht deiner Website oder wie bereits beschrieben unter Design > Customizer<\/em> \u2013 vorausgesetzt, du bist eingeloggt \ud83d\ude09<\/p>\n<\/div><\/div>
                  <\/i><\/div>
                  Du hast Google Fonts bereits in deine WordPress-Website integriert?<\/strong> Oder dein Theme oder Plugin l\u00e4dt Google-Schriften? Dann wirf unbedingt einen Blick auf unseren Artikel \u00fcber das einfache lokale Hosten von Google Fonts<\/a> \u2013 selbstverst\u00e4ndlich datenschutzkonform \ud83d\ude0c<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>","protected":false},"author":1,"featured_media":235571,"template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"How to integrate web fonts into your WordPress website!","_seopress_titles_desc":"Learn how to add web fonts to your WordPress website in no time at all - and all in a GDPR-compliant way!","_seopress_robots_index":"","inline_featured_image":false,"restrictTranslations":["en_US","de_DE"],"footnotes":""},"class_list":["post-234838","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\/234838","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":15,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/blog\/234838\/revisions"}],"predecessor-version":[{"id":241911,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/blog\/234838\/revisions\/241911"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/media\/235571"}],"wp:attachment":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/media?parent=234838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}