{"id":40160,"date":"2021-04-14T13:25:49","date_gmt":"2021-04-14T12:25:49","guid":{"rendered":"https:\/\/kinsta.com\/?p=9545"},"modified":"2023-08-29T06:44:27","modified_gmt":"2023-08-29T05:44:27","slug":"lokaler-schriftarten","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/","title":{"rendered":"Ausf\u00fchrliche Anleitung zum Hosten lokaler Schriftarten in WordPress"},"content":{"rendered":"<p>Wenn es um das Hosten und Verwenden von Schriftarten auf deiner WordPress Seite geht, gibt es viele verschiedene M\u00f6glichkeiten. Du kannst sie lokal hosten, du kannst Google Fonts verwenden (die meisten Themes haben heutzutage Google Fonts integriert), oder du kannst einen anderen Drittanbieter-Dienst wie Adobe Fonts nutzen. Heute wollen wir in ein paar Gr\u00fcnde eintauchen, warum das Hosten von lokalen Fonts in WordPress von Vorteil sein kann. Nicht nur, dass du eine gr\u00f6\u00dfere Auswahl an <a href=\"https:\/\/kinsta.com\/de\/blog\/html-fonts\/\">HTML-Schriftarten<\/a> hast, sondern es gibt manchmal auch <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/\">Performance-Vorteile<\/a>. In unserem ausf\u00fchrlichen Tutorial erf\u00e4hrst du, wie du deine Premium-Schriften lokal hosten kannst, aber auch jede andere Schriftfamilie von Google Fonts.<\/p>\n<ul>\n<li><a href=\"#web-fonts\">Was sind Web <span id=\"urn:enhancement-17\" class=\"textannotation\">Fonts<\/span>?<\/a><\/li>\n<li><a href=\"#local-fonts-vs-3rd-party\">Lokale Fonts hosten vs. Drittanbieter-Fonts<\/a><\/li>\n<li><a href=\"#host-local-fonts-wordpress\">Wie man lokale Schriften in WordPress hostet<span id=\"urn:enhancement-260\" class=\"textannotation\"><\/span><\/a><\/li>\n<\/ul>\n<h2 id=\"web-fonts\">Was sind Web Fonts?<\/h2>\n<p>Wenn du auf deine WordPress Seite gehst, siehst du zwei Arten von Schriftarten, <a href=\"https:\/\/kinsta.com\/de\/blog\/websichere-schriften\/\">Web Safe Fonts<\/a> oder Web Fonts. Oder sie k\u00f6nnten auch eine Mischung aus beidem verwenden.<\/p>\n<p>Empfohlene Lekt\u00fcre: <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/\">Wie man die Schriftart in WordPress \u00e4ndert<\/a>.<\/p>\n<ul style=\"margin-left: 30px\">\n<li><strong>Websichere Schriftarten<\/strong> sind Schriftarten, die auf einem Ger\u00e4t oder Betriebssystem vorinstalliert sind. Einige Beispiele f\u00fcr websichere Schriftarten sind Arial, Times New Roman und Courier New sowie generische Schriftfamilien wie Serif, Sans-Serif (siehe <a href=\"https:\/\/kinsta.com\/de\/blog\/moderne-schriften\/\">moderne Schriftarten<\/a>)\u00a0und Monospace. Dies sind Schriftarten, die du seit vielen Jahren kennst. Hier findest du eine <a href=\"https:\/\/kinsta.com\/de\/blog\/websichere-schriften\/\">vollst\u00e4ndige Liste der websicheren Schriftarten<\/a>.<\/li>\n<li><strong>Webfonts<\/strong> sind Schriftarten, die nicht auf einem Ger\u00e4t vorinstalliert sind und vom Browser des Nutzers heruntergeladen werden m\u00fcssen, bevor sie angezeigt werden. Einige Beispiele f\u00fcr Webfonts sind die Google-Schriftarten Open Sans und Roboto sowie die beliebte Schriftart Proxima Nova von Adobe Fonts.<\/li>\n<\/ul>\n<p>Google Fonts ist ein Open Source Schriftenverzeichnis, das in den letzten Jahren weit verbreitet ist. Laut BuiltWith nutzen \u00fcber 45% der Top 10.000 Webseiten <a href=\"https:\/\/trends.builtwith.com\/widgets\/Google-Font-API\">Google Fonts<\/a> auf ihren Webseiten. Und wenn wir uns die <a href=\"https:\/\/fonts.google.com\/analytics\">Google Fonts Analytics<\/a> anschauen, k\u00f6nnen wir sehen, dass sie \u00fcber 17 Quadrillionen Views hatten. Das ist eine Menge! Open Sans und Roboto sind die beiden am h\u00e4ufigsten genutzten Schriftfamilien, wobei Roboto im letzten Jahr ein sattes Wachstum von 77% verzeichnen konnte. Wir haben einen Beitrag \u00fcber die besten Google Fonts, schau ihn dir unbedingt an: <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-google-fonts\/\">Die 15 besten Google Fonts in Zahlen<\/a>.<\/p>\n<figure id=\"attachment_13987\" aria-describedby=\"caption-attachment-13987\" style=\"width: 2597px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-13987 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/google-font-stats-1.png\" alt=\"Googles Statistiken\" width=\"2597\" height=\"1802\"><figcaption id=\"caption-attachment-13987\" class=\"wp-caption-text\">Googles Statistiken<\/figcaption><\/figure>\n<h2 id=\"local-fonts-vs-3rd-party\">Lokale Fonts hosten vs. Drittanbieter<\/h2>\n<p>Bevor wir in das Tutorial eintauchen, ist es wichtig, ein paar Vor- und Nachteile zwischen dem Hosten lokaler Schriften und der Nutzung eines Drittanbieters zu verstehen. Lokales Hosten von Schriften bedeutet, dass du die Schriftdateien auf deinem eigenen Server hast (oder auf dein <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-cdn\/\">CDN<\/a> kopierst, das du auch f\u00fcr alle anderen Assets verwendest). Wenn du hingegen einen Drittanbieter wie Google Fonts oder Adobe Fonts nutzt, bindest du die Schriftarten einfach durch einen Link zu einem externen Asset ein.<\/p>\n<h3>Vorteile von lokalen Fonts<\/h3>\n<h4>1. Gr\u00f6\u00dfere Auswahl an Schriftarten<\/h4>\n<p>Ein gro\u00dfer Vorteil der Verwendung von lokalen Schriften ist, dass du <strong>eine viel gr\u00f6\u00dfere Auswahl an Schriften<\/strong> hast! Auch wenn die Bibliotheken von Drittanbietern wie Google Fonts und Adobe Fonts sehr umfangreich sind, k\u00f6nnen sie nicht mit den Premium-Font-Shops mithalten, in denen du jede beliebige Premium-Schriftart kaufen und auf deiner Webseite hosten kannst. Wir werden in unserem Tutorial eine Premium-Schriftart verwenden, die du nicht \u00fcber einen Drittanbieterdienst beziehen kannst.<\/p>\n<h4>2. K\u00f6nnte besser integriert werden<\/h4>\n<p>Aufgrund der gr\u00f6\u00dferen Auswahl an Schriftarten kann es sein, dass du beim lokalen Hosten eine Schriftart w\u00e4hlen kannst, die sich besser in <strong>dein Branding integriert, um die Konsistenz auf deiner Webseite zu erhalten<\/strong>. Das alles h\u00e4ngt von deinen Designanforderungen und Vorlieben ab.<\/p>\n<h4>3. Du musst dich nicht auf Dienste von Drittanbietern verlassen<\/h4>\n<p>Wenn du Fonts lokal hostest, <strong>musst du dich nicht auf Dienste von Drittanbietern<\/strong> oder deren Server verlassen. Dienste wie Adobe Fonts (fr\u00fcher Typekit) sind daf\u00fcr bekannt, dass sie ausfallen, was dich wiederum schlecht aussehen l\u00e4sst. Weniger Abh\u00e4ngigkeiten auf deiner WordPress Seite zu haben, ist immer besser.<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">When <a href=\"https:\/\/t.co\/Kde0okKlP0\">https:\/\/t.co\/Kde0okKlP0<\/a> is down the web stops working <a href=\"https:\/\/twitter.com\/hashtag\/customfontssuck?src=hash&amp;ref_src=twsrc%5Etfw\">#customfontssuck<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/3rdpartyjs?src=hash&amp;ref_src=twsrc%5Etfw\">#3rdpartyjs<\/a><\/p>\n<p>&mdash; Mark \u26d4\ufe0f\ud83d\udc1d (@markhealey) <a href=\"https:\/\/twitter.com\/markhealey\/status\/666484210090176513?ref_src=twsrc%5Etfw\">November 17, 2015<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<h4>4. Volle Kontrolle \u00fcber das Caching<\/h4>\n<p>Durch die Verwendung lokaler Schriftarten hast du die <strong>volle Kontrolle \u00fcber das Caching<\/strong> deiner Schriftdateien. Wenn du Google Fonts oder einen anderen Dienst eines Drittanbieters verwendest, kann es sein, dass du Fehler oder Warnungen siehst, dass den Ressourcen ein Cache-Validator fehlt oder dass sie <a href=\"https:\/\/kinsta.com\/de\/blog\/expires-header-wordpress\/\">expires-Header<\/a> ben\u00f6tigen. Diese werden auf Serverebene behoben, und wenn sie auf einem Drittanbieter-Server liegen, hast du keine Kontrolle \u00fcber die Behebung dieser Fehler.<\/p>\n<figure id=\"attachment_9581\" aria-describedby=\"caption-attachment-9581\" style=\"width: 1384px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9581 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/google-fonts-specify-a-cache-validator.jpg\" alt=\"Lege einen Cache Validator fest\" width=\"1384\" height=\"273\"><figcaption id=\"caption-attachment-9581\" class=\"wp-caption-text\">Lege einen Cache Validator fest<\/figcaption><\/figure>\n<h4>5. Weniger Requests k\u00f6nnen schnellere Ladezeiten bedeuten<\/h4>\n<p>Aufgrund der Tatsache, dass Web Fonts von einem Drittanbieter heruntergeladen werden m\u00fcssen, kann dies wiederum einen Einfluss auf die Ladezeit deiner Webseite haben. Du wei\u00dft nie, wie schnell deren Server gerade arbeiten. Mit deinem WordPress Host hast du jedoch mehr Kontrolle dar\u00fcber, oder solltest es zumindest! Adobe Fonts, zum Beispiel, f\u00fcgt 2 externe <a href=\"https:\/\/kinsta.com\/de\/blog\/weniger-http-requests-macht\/\">HTTP-Anfragen<\/a> hinzu und es kodiert auch alle Schriftformate mit base64. Wenn du dich nicht mit Fonts auskennst, brauchst du nicht mehr alle Schriftformate zu bedienen, sondern nur noch WOFF und WOFF2 (wenn du auf zus\u00e4tzliche Kompression setzt).<\/p>\n<p>Mit Google Fonts hast du auch einen zus\u00e4tzlichen <a href=\"https:\/\/kinsta.com\/de\/blog\/reduzieren-dns-lookups\/\">DNS-Request<\/a>, um fonts.googleapis.com aufzurufen, um die CSS-Datei zu holen. Du hast dann zus\u00e4tzliche Anfragen an fonts.gstatic.com, um die Schriftdateien herunterzuladen. <strong>Wenn du lokal hostest, kommen alle Anfragen von der gleichen Domain<\/strong> und h\u00f6chstwahrscheinlich wirst du <strong>keine weitere CSS-Datei ben\u00f6tigen, da sie in der CSS-Datei<\/strong> deines WordPress-Themes enthalten sein wird.<\/p>\n<figure id=\"attachment_9582\" aria-describedby=\"caption-attachment-9582\" style=\"width: 1680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9582 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/google-font-requests.jpg\" alt=\"Google macht HTTP Anfragen\" width=\"1680\" height=\"308\"><figcaption id=\"caption-attachment-9582\" class=\"wp-caption-text\">Google macht HTTP Anfragen<\/figcaption><\/figure>\n<h4>6. Einzelne HTTP\/2 Verbindung<\/h4>\n<p>Wenn du noch nicht \u00fcber die <a href=\"https:\/\/kinsta.com\/de\/lernen\/http2\/\">Vorteile von HTTP\/2<\/a> gelesen hast, empfehlen wir dir, dies zu tun. Indem du deine Schriften lokal oder auf deinem CDN hostest, kannst du die Vorteile einer <strong>einzigen HTTP\/2-Verbindung<\/strong> f\u00fcr bessere Parallelit\u00e4t und Multiplexing nutzen.<\/p>\n<h3>Nachteile von lokalen Fonts<\/h3>\n<p>Nachdem wir nun die Vorteile von lokalen Fonts besprochen haben, gibt es auch einige Nachteile, die du beachten solltest.<\/p>\n<h4>1. Google Fonts k\u00f6nnten bereits gecached sein<\/h4>\n<p>Google Fonts nutzt ein eigenes CDN, das schnell ist, schlie\u00dflich ist es Google. Aufgrund der Tatsache, dass so viele Webseiten bereits Google Fonts nutzen, <strong>k\u00f6nnte es sehr gut sein, dass der Nutzer die Schriftart bereits im Cache seines Browsers hat<\/strong>. Wenn du eine einzigartigere, hochwertigere Schriftart verwendest, <strong>k\u00f6nnte es die Downloadzeiten tats\u00e4chlich erh\u00f6hen<\/strong>. Wenn jemand zum Beispiel eine Webseite besucht, die die Schriftart Roboto von Google Fonts verwendet, wird sie in den Cache geladen. Wenn sie dann deine Webseite besuchen, die ebenfalls Roboto verwendet, muss die Schriftart nicht erneut heruntergeladen werden. Wenn du aber eine neu ver\u00f6ffentlichte Premium-Schriftart wie Proxima Soft verwendest, muss sie h\u00f6chstwahrscheinlich heruntergeladen werden, was die Ladezeiten erh\u00f6hen kann.<\/p>\n<p>Wenn du eine Premium-Schriftart verwendest, die nicht weit verbreitet ist, solltest du damit rechnen, dass der Browser dieser Person es herunterladen muss, wenn sie das erste Mal auf deine Webseite kommt. Hinweis: Wenn du eine beliebte Google-Schriftart verwendest und sie lokal hostest, wie z.B. Roboto, trifft dies nicht zu, da der Browser intelligent genug ist, um es im Cache zu erkennen (egal ob es von Google oder lokal von deiner Webseite geladen wird).<\/p>\n<h4>2. Mehr Komplexit\u00e4t<\/h4>\n<p>Uns ist klar, dass nicht jeder da drau\u00dfen ein WordPress-Guru ist. Das Hosten von lokalen <strong>Fonts erfordert definitiv ein wenig mehr Setup<\/strong>. Ein WordPress-Theme kann zum Beispiel Google Fonts automatisch in seinem Theme aufrufen und wenn du Fonts lokal hostest, musst du einen Weg finden, den Aufruf dieser Fonts auf deiner Webseite zu deaktivieren. Das k\u00f6nnte bedeuten, dass du deinen Theme-Entwickler um eine schnelle Codezeile bitten musst. Das mag kompliziert klingen, aber wir werden versuchen, es im folgenden Tutorial so einfach wie m\u00f6glich zu erkl\u00e4ren.<\/p>\n<h4>3. Sorgf\u00e4ltiger bei der Wahl der Schriftarten<\/h4>\n<p>Wenn du lokale Schriftarten hostest, musst du ausw\u00e4hlen, welche Schriftarten du unterst\u00fctzen m\u00f6chtest. Wenn du nur die neueren Formate ausw\u00e4hlst, wie z.B. nur WOFF2, k\u00f6nntest du \u00e4ltere Browser ausschlie\u00dfen, die dann wiederum auf alte, <a href=\"https:\/\/kinsta.com\/de\/blog\/websichere-schriften\/\">websichere Schriftarten<\/a> zur\u00fcckgreifen w\u00fcrden. <a href=\"http:\/\/caniuse.com\/#feat=woff2\">Laut CanIUse<\/a> k\u00f6nnten zum Beispiel IE11, Safari und einige Versionen des Android Browsers Probleme damit haben, nur WOFF2 Webfonts zu verwenden. Du wirst also wahrscheinlich WOFF + WOFF 2 verwenden wollen, um auf der ganzen Linie sicher zu sein. WOFF 2 bietet viel <a href=\"https:\/\/gist.github.com\/sergejmueller\/cf6b4f2133bcb3e2f64a\">h\u00f6here Kompressionsmethoden<\/a>, deshalb solltest du beides verwenden.<\/p>\n<figure id=\"attachment_9583\" aria-describedby=\"caption-attachment-9583\" style=\"width: 1508px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9583 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/woff-2-browser-support.jpg\" alt=\"WOFF2 Browser Support\" width=\"1508\" height=\"781\"><figcaption id=\"caption-attachment-9583\" class=\"wp-caption-text\">WOFF2 Browser Support<\/figcaption><\/figure>\n<p>Wenn du einen Drittanbieter-Service nutzt, ist es fast unm\u00f6glich, dies zu vermasseln, da dieser eine breite Palette an Browser-Support von Haus aus ber\u00fccksichtigt. Wenn du also lokal hostest, <strong>musst du bei der Auswahl der Schriftarten etwas vorsichtiger sein<\/strong>.<\/p>\n<h4>4. Mach es nicht ohne CDN<\/h4>\n<p>Viele Webseiten nutzen heute ein CDN wie Cloudflare oder KeyCDN, um die Auslieferung ihrer Assets zu beschleunigen. Das ist wichtig, denn es <a href=\"https:\/\/kinsta.com\/de\/blog\/reduzieren-dns-lookups\/\">reduziert die Latenz und die DNS-Lookup-Zeiten<\/a> auf der ganzen Linie. Wenn du lokale Schriftarten verwendest und kein CDN nutzt, kann es sein, dass deine Webseite langsamer wird, als wenn du einen Dienst wie Google Fonts oder Adobe Fonts nutzt. Der Grund daf\u00fcr ist, dass alle diese Dienste ein CDN nutzen, um ihre Schriften auszuliefern. Daher empfehlen wir dir, sofern du nicht nur Traffic in einem kleinen geografischen Gebiet hast, <strong>immer ein CDN zu nutzen, wenn du deine eigenen Fonts<\/strong> hostest. Und nat\u00fcrlich solltest du sicherstellen, dass du einen <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTTP\/2#Software_and_services_supporting_HTTP.2F2\">CDN-Anbieter verwendest, der HTTP\/2<\/a> unterst\u00fctzt.<\/p>\n<p>Das <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#kinstas-cdn\">Kinsta CDN<\/a> unterst\u00fctzt HTTP\/2 und kostenlose Bandbreite ist f\u00fcr alle Kunden inklusive. \ud83d\ude80<\/p>\n<h2 id=\"host-local-fonts-wordpress\">Wie man lokale Fonts in WordPress hostet<\/h2>\n<p>Jetzt ist es Zeit f\u00fcr den spa\u00dfigen Teil! Das Hosten deiner lokalen Fonts in WordPress. Wir gehen im Folgenden zwei verschiedene Optionen durch, eine mit einer Premium-Schriftart, die wir gekauft haben, und die zweite ist, tats\u00e4chlich eine Google-Schriftart zu nehmen und sie lokal zu hosten. In diesem Tutorial verwenden wir eine frische WordPress-Installation mit dem installierten Twenty Seventeen Theme.<\/p>\n<ul style=\"margin-left: 30px\">\n<li><a href=\"#host-fonts-locally\">Wie man Premium-Schriften lokal hoste<\/a><\/li>\n<li><a href=\"#host-google-fonts-locally\">Wie man Google Fonts lokal hostet<\/a><\/li>\n<\/ul>\n<h3><a id=\"host-fonts-locally\"><\/a>1. Wie man Premium Fonts lokal hostet<\/h3>\n<p>Um eine Premium-Schriftart lokal zu hosten, haben wir uns f\u00fcr Fontspring und die neue <a href=\"https:\/\/www.fontspring.com\/fonts\/mark-simonson-studio\/proxima-soft-standard\">Proxima Soft Schriftart<\/a> entschieden, die im Januar 2017 ver\u00f6ffentlicht wurde. Die Proxima Nova Soft wurde von Mark Simonson entwickelt und ist eine neuere Version der urspr\u00fcnglichen Proxima Nova. Wir haben uns f\u00fcr Fontspring entschieden, weil sie keine Tracking-Skripte von Drittanbietern ben\u00f6tigen und die Schriftart nur einmalig gekauft werden muss und auf einer unbegrenzten Anzahl von Webseiten verwendet werden kann. Sei sehr vorsichtig, wenn du Fonts kaufst, da viele von ihnen Tracking-Skripte von Drittanbietern ben\u00f6tigen, was in gewisser Weise den Zweck des lokalen Hostings zunichte macht.<\/p>\n<figure id=\"attachment_9588\" aria-describedby=\"caption-attachment-9588\" style=\"width: 1291px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9588 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/fontspring-logo.jpg\" alt=\"Fontspring\" width=\"1291\" height=\"153\"><figcaption id=\"caption-attachment-9588\" class=\"wp-caption-text\">Fontspring<\/figcaption><\/figure>\n<p>Wir haben die Proxima Soft Regular und die Proxima Soft Bold Schriftarten gekauft. Generell ist eine normale Schriftart und fett f\u00fcr die meisten Webseiten ausreichend. Je nach deiner Webseite kannst du dir auch eine kursive Version und Semi-Bold zulegen. Hinweis: Wir haben keine Partnerschaften mit Fontspring, wir denken einfach, dass sie den Kauf und die Lizenzierung von Premium-Schriften richtig machen!<\/p>\n<h4>Schritt 1<\/h4>\n<p>Nachdem du deine Fonts gekauft hast, bekommst du eine E-Mail mit einem Link zu den Font-Dateien.<\/p>\n<figure id=\"attachment_9585\" aria-describedby=\"caption-attachment-9585\" style=\"width: 1602px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9585 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/proxima-soft-download.png\" alt=\"Proxima Soft Schriftart download\" width=\"1602\" height=\"261\"><figcaption id=\"caption-attachment-9585\" class=\"wp-caption-text\">Proxima Soft Schriftart download<\/figcaption><\/figure>\n<h4>Schritt 2<\/h4>\n<p>Jede Schriftart, wie z.B. bold und regular, hat ihre eigenen Schrifttypen, wie WOFF2, WOFF, TTF, etc. In diesem Beispiel werden wir nur die WOFF- und WOFF2-Versionen von bold und bold regular verwenden, was einen guten Support f\u00fcr moderne Browser gew\u00e4hrleistet.<\/p>\n<figure id=\"attachment_9586\" aria-describedby=\"caption-attachment-9586\" style=\"width: 1313px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9586 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/font-files-local.png\" alt=\"Lokale Font Dateien\" width=\"1313\" height=\"423\"><figcaption id=\"caption-attachment-9586\" class=\"wp-caption-text\">Lokale Font Dateien<\/figcaption><\/figure>\n<h4>Schritt 3<\/h4>\n<p>Wir nehmen die Schriftdateien und laden sie per FTP auf deine WordPress Seite in einen Ordner namens &#8222;fonts&#8220;. In diesem Beispiel nutzen wir ein CDN f\u00fcr alle unsere Assets, zusammen mit dem kostenlosen <a href=\"https:\/\/wordpress.org\/plugins\/cdn-enabler\/\">CDN Enabler Plugin<\/a> vom Team bei KeyCDN. Dieses Plugin kopiert automatisch die Schriften, die wir gerade hochgeladen haben, in unser CDN. Auch wenn wir sagen, dass wir sie lokal hosten, referenziert ein CDN immer noch deine lokalen Assets. Der wichtige Teil ist, dass du alle deine Assets von einem Ort aus anbietest und nicht mehrere Domains (Hosts) referenzierst.<\/p>\n<figure id=\"attachment_9589\" aria-describedby=\"caption-attachment-9589\" style=\"width: 1181px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9589 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/local-fonts-ftp.jpg\" alt=\"Schriftarten auf den Webserver hochladen\" width=\"1181\" height=\"587\"><figcaption id=\"caption-attachment-9589\" class=\"wp-caption-text\">Schriftarten auf den Webserver hochladen<\/figcaption><\/figure>\n<h4>Schritt 4<\/h4>\n<p>Du musst deine neuen Schriftarten in CSS auf deiner WordPress Seite referenzieren. Viele Themes haben heutzutage ein eigenes CSS-Panel, oder du kannst ein kostenloses Plugin wie <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\">Simple Custom CSS and JS<\/a> verwenden. Wir f\u00fcgen den folgenden Code ein, der unsere CDN URL referenziert.<\/p>\n<pre><code class=\"language-html\"><span id=\"urn:enhancement-2\" class=\"textannotation\">@font-face<\/span> {\n font-family: 'proxima_softregular';\n src: url('https:\/\/cdn.wpdev<span id=\"urn:enhancement-296\" class=\"textannotation\">.ink<\/span>\/fonts\/proximasoft-regular-webfont.woff2') <span id=\"urn:enhancement-359\" class=\"textannotation\">format<\/span>('woff2'),\n url('https:\/\/cdn.wpdev<span id=\"urn:enhancement-297\" class=\"textannotation\">.ink<\/span>\/fonts\/proximasoft-regular-webfont<span id=\"urn:enhancement-108\" class=\"textannotation\">.woff<\/span>') <span id=\"urn:enhancement-360\" class=\"textannotation\">format<\/span>('woff');\n font-weight: normal;\n font-style: normal;\n}\n\n<span id=\"urn:enhancement-3\" class=\"textannotation\">@font-face<\/span> {\n font-family: 'proxima_softbold';\n src: url('https:\/\/cdn.wpdev<span id=\"urn:enhancement-298\" class=\"textannotation\">.ink<\/span>\/fonts\/proximasoft-<span id=\"urn:enhancement-105\" class=\"textannotation\">bold<\/span>-webfont.woff2') <span id=\"urn:enhancement-361\" class=\"textannotation\">format<\/span>('woff2'),\n url('https:\/\/cdn.wpdev<span id=\"urn:enhancement-299\" class=\"textannotation\">.ink<\/span>\/fonts\/proximasoft-<span id=\"urn:enhancement-106\" class=\"textannotation\">bold<\/span>-webfont<span id=\"urn:enhancement-109\" class=\"textannotation\">.woff<\/span>') <span id=\"urn:enhancement-362\" class=\"textannotation\">format<\/span>('woff');\n font-weight: normal;\n font-style: normal;\n}<\/code><\/pre>\n<p>Du musst auch deine Styles aktualisieren, damit sie auf die neue Schriftfamilie verweisen. Hier ist ein Beispiel f\u00fcr den Code, den wir f\u00fcr das Twenty Seventeen Theme verwendet haben.<\/p>\n<pre><code class=\"language-html\">body {font-family: 'proxima_softregular', <span id=\"urn:enhancement-348\" class=\"textannotation\">Arial<\/span>, <span id=\"urn:enhancement-198\" class=\"textannotation\">sans-serif<\/span>;}\nh1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', <span id=\"urn:enhancement-349\" class=\"textannotation\">Arial<\/span>, <span id=\"urn:enhancement-199\" class=\"textannotation\">sans-serif<\/span>;}<\/code><\/pre>\n<p>Hier ist ein Screenshot vom Simple Custom CSS and JS Plugin.<\/p>\n<figure id=\"attachment_9590\" aria-describedby=\"caption-attachment-9590\" style=\"width: 1570px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9590 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/custom-local-fonts-css-code.jpg\" alt=\"CSS Code f\u00fcr benutzerdefinierte Schriftarten\" width=\"1570\" height=\"1242\"><figcaption id=\"caption-attachment-9590\" class=\"wp-caption-text\">CSS Code f\u00fcr benutzerdefinierte Schriftarten<\/figcaption><\/figure>\n<h4>Schritt 5<\/h4>\n<p>Wenn in deinem WordPress Theme bereits Google Fonts integriert sind, solltest du sicherstellen, dass du diese deaktivierst. Andernfalls kann es sein, dass du sowohl deine lokalen Schriftarten als auch die Google Fonts l\u00e4dst. Da wir in diesem Tutorial das Twenty Seventeen Theme verwenden, nutzen wir das kostenlose <a href=\"https:\/\/wordpress.org\/plugins\/disable-google-fonts\/\">Plugin Disable Google Fonts<\/a>. Dies funktioniert nur f\u00fcr die Standard-Themes in WordPress. F\u00fcr die meisten Themes musst du dich wahrscheinlich an den Entwickler wenden und er kann schnell eine Funktion zum Deaktivieren von Google Fonts bereitstellen. Oder schaue in der Dokumentation nach, in der Regel ist dies ein sehr schneller Tweak. Einige Themes haben sogar eine Option, um sie im Backend ein- oder auszuschalten.<\/p>\n<p>Und das war&#8217;s! Hier ist ein Screenshot mit unserer neuen Proxima Soft Schriftart, die f\u00fcr unsere K\u00f6rperschrift und \u00dcberschriften im Twenty Seventeen Theme geladen wird.<\/p>\n<figure id=\"attachment_9591\" aria-describedby=\"caption-attachment-9591\" style=\"width: 1496px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9591 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/new-fonts-on-wordpress-site.jpg\" alt=\"neue Schriftarten auf deiner WordPress Seite\" width=\"1496\" height=\"1061\"><figcaption id=\"caption-attachment-9591\" class=\"wp-caption-text\">neue Schriftarten auf deiner WordPress Seite<\/figcaption><\/figure>\n<p>Und hier ist ein Screenshot unserer HTTP-Anfragen. Wie du sehen kannst, haben wir nur 2 Anfragen f\u00fcr die WOFF2-Fonts, anstatt der 4 Anfragen von Google, die wir vorher gezeigt haben. Wir haben die WOFF-Fonts auch auf unserer Webseite, aber da Chrome WOFF2 unterst\u00fctzt, werden diese stattdessen gezogen. H\u00e4tten wir die Webseite z.B. mit dem IE 11 aufgerufen, w\u00e4ren stattdessen die WOFF-Fonts geladen worden.<\/p>\n<figure id=\"attachment_9592\" aria-describedby=\"caption-attachment-9592\" style=\"width: 1687px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9592 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/local-fonts-loading.jpg\" alt=\"HTTP Anfragen f\u00fcr lokal gehostete Schriftarten\" width=\"1687\" height=\"1072\"><figcaption id=\"caption-attachment-9592\" class=\"wp-caption-text\">HTTP Anfragen f\u00fcr lokal gehostete Schriftarten<\/figcaption><\/figure>\n<h3><a id=\"host-google-fonts-locally\"><\/a>2. Wie man Google Fonts lokal hostet<\/h3>\n<p>Die zweite M\u00f6glichkeit, Fonts lokal zu hosten, besteht darin, eine Schriftart, die du bereits auf Google Fonts magst, einfach auf deinen Server oder ins CDN zu verschieben. Open Sans ist bekannt daf\u00fcr, sehr leichtgewichtig und super schnell zu sein. Also werden wir diese in unserem Beispiel verwenden.<\/p>\n<h4>Schritt 1<\/h4>\n<p>Die Google Fonts holst du dir am besten mit dem kostenlosen <a href=\"https:\/\/google-webfonts-helper.herokuapp.com\/\">google-webfonts-helper<\/a> Tool, das wir f\u00fcr dieses Tutorial verwenden. Vielleicht m\u00f6chtest du dir auch das <a href=\"https:\/\/fontfaceobserver.com\/\">Font Face Observer<\/a> Projekt anschauen. Als erstes musst du nach dem gew\u00fcnschten Google Font suchen und die Stile ausw\u00e4hlen. Wir w\u00e4hlen wieder die Schriftstile regular und bold (700).<\/p>\n<figure id=\"attachment_9593\" aria-describedby=\"caption-attachment-9593\" style=\"width: 1316px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9593 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/download-open-sans-font-e1487901464223.jpg\" alt=\"Schrift herunterladen Open Sans web\" width=\"1316\" height=\"1216\"><figcaption id=\"caption-attachment-9593\" class=\"wp-caption-text\">Schrift herunterladen Open Sans web<\/figcaption><\/figure>\n<h4>Schritt 2<\/h4>\n<p>Dann musst du ausw\u00e4hlen, welchen Browser Support du m\u00f6chtest. Moderne Browser geben dir die WOFF und WOFF2 Schriftarten, was wir wollen. Der beste Support bietet dir WOFF, WOFF2, EOT, TTF und SVG. Wie du sehen kannst, gibt es den Code, den du in die Zwischenablage kopieren kannst, sowie das Download-Zip mit den Schriften.<\/p>\n<figure id=\"attachment_9594\" aria-describedby=\"caption-attachment-9594\" style=\"width: 1365px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9594 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/fonts-modern-browsers.jpg\" alt=\"CSS f\u00fcr Schriftarten in modernen Browsern\" width=\"1365\" height=\"1179\"><figcaption id=\"caption-attachment-9594\" class=\"wp-caption-text\">CSS f\u00fcr Schriftarten in modernen Browsern<\/figcaption><\/figure>\n<p>Der Rest der Anleitung ist dann sehr \u00e4hnlich zu unserem Premium-Schriftarten Beispiel oben.<\/p>\n<h4>Schritt 3<\/h4>\n<p>Wir nehmen die Schriftdateien und laden sie per FTP auf deine WordPress Seite in einen Ordner namens &#8222;fonts&#8220; hoch. In diesem Beispiel verwenden wir ein CDN f\u00fcr alle unsere Assets, zusammen mit dem kostenlosen <a href=\"https:\/\/wordpress.org\/plugins\/cdn-enabler\/\">CDN Enabler Plugin<\/a> vom Team bei KeyCDN. Dieses Plugin kopiert automatisch die Schriften, die wir gerade hochgeladen haben, in unser CDN. Auch wenn wir sagen, dass wir sie lokal hosten, referenziert ein CDN immer noch deine lokalen Assets. Der wichtige Teil ist, dass du alle deine Assets von einem Ort aus anbietest und nicht mehrere Domains (Hosts) referenzierst.<\/p>\n<figure id=\"attachment_9595\" aria-describedby=\"caption-attachment-9595\" style=\"width: 1136px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9595 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/upload-google-fonts-server.jpg\" alt=\"Google Fonts auf den Webserver hochladen\" width=\"1136\" height=\"693\"><figcaption id=\"caption-attachment-9595\" class=\"wp-caption-text\">Google Fonts auf den Webserver hochladen<\/figcaption><\/figure>\n<h4>Schritt 4<\/h4>\n<p>Du musst deine neuen Schriftarten in CSS auf deiner WordPress Seite referenzieren. Viele Themes haben heutzutage ein eigenes CSS-Panel, oder du kannst ein kostenloses Plugin wie <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\">Simple Custom CSS and JS<\/a> verwenden. Wir f\u00fcgen den folgenden Code ein, der unsere CDN URL referenziert.<\/p>\n<pre><code class=\"language-html\">\/* open-sans-regular - latin *\/\n<span id=\"urn:enhancement-4\" class=\"textannotation\">@font-face<\/span> {\n font-family: 'Open <span id=\"urn:enhancement-206\" class=\"textannotation\">Sans<\/span>';\n font-style: normal;\n font-weight: 400;\n src: local('Open <span id=\"urn:enhancement-207\" class=\"textannotation\">Sans<\/span>'), local('OpenSans'),\n url('https:\/\/cdn.wpdev<span id=\"urn:enhancement-300\" class=\"textannotation\">.ink<\/span>\/fonts\/open-sans-v13-latin-regular.woff2') <span id=\"urn:enhancement-363\" class=\"textannotation\">format<\/span>('woff2'), \/* <span id=\"urn:enhancement-127\" class=\"textannotation\">Chrome<\/span> 26+, Opera 23+, <span id=\"urn:enhancement-135\" class=\"textannotation\">Firefox<\/span> 39+ *\/\n url('https:\/\/cdn.wpdev<span id=\"urn:enhancement-301\" class=\"textannotation\">.ink<\/span>\/fonts\/open-sans-v13-latin-regular<span id=\"urn:enhancement-110\" class=\"textannotation\">.woff<\/span>') <span id=\"urn:enhancement-364\" class=\"textannotation\">format<\/span>('woff'); \/* <span id=\"urn:enhancement-128\" class=\"textannotation\">Chrome<\/span> 6+, <span id=\"urn:enhancement-136\" class=\"textannotation\">Firefox<\/span> 3.6+, <span id=\"urn:enhancement-194\" class=\"textannotation\">IE<\/span> 9+, <span id=\"urn:enhancement-133\" class=\"textannotation\">Safari<\/span> 5.1+ *\/\n}\n\/* open-sans-700 - latin *\/\n<span id=\"urn:enhancement-5\" class=\"textannotation\">@font-face<\/span> {\n font-family: 'Open <span id=\"urn:enhancement-208\" class=\"textannotation\">Sans<\/span>';\n font-style: normal;\n font-weight: 700;\n src: local('Open <span id=\"urn:enhancement-209\" class=\"textannotation\">Sans<\/span> <span id=\"urn:enhancement-116\" class=\"textannotation\">Bold<\/span>'), local('OpenSans-<span id=\"urn:enhancement-117\" class=\"textannotation\">Bold<\/span>'),\n url('https:\/\/cdn.wpdev<span id=\"urn:enhancement-302\" class=\"textannotation\">.ink<\/span>\/fonts\/open-sans-v13-latin-700.woff2') <span id=\"urn:enhancement-365\" class=\"textannotation\">format<\/span>('woff2'), \/* <span id=\"urn:enhancement-129\" class=\"textannotation\">Chrome<\/span> 26+, Opera 23+, <span id=\"urn:enhancement-137\" class=\"textannotation\">Firefox<\/span> 39+ *\/\n url('https:\/\/cdn.wpdev<span id=\"urn:enhancement-303\" class=\"textannotation\">.ink<\/span>\/fonts\/open-sans-v13-latin-700<span id=\"urn:enhancement-111\" class=\"textannotation\">.woff<\/span>') <span id=\"urn:enhancement-366\" class=\"textannotation\">format<\/span>('woff'); \/* <span id=\"urn:enhancement-130\" class=\"textannotation\">Chrome<\/span> 6+, <span id=\"urn:enhancement-138\" class=\"textannotation\">Firefox<\/span> 3.6+, <span id=\"urn:enhancement-195\" class=\"textannotation\">IE<\/span> 9+, <span id=\"urn:enhancement-134\" class=\"textannotation\">Safari<\/span> 5.1+ *\/\n}<\/code><\/pre>\n<p>Du musst auch deine Styles aktualisieren, damit sie auf die neue Schriftfamilie verweisen. Hier ist ein Beispiel f\u00fcr den Code, den wir f\u00fcr das Twenty Seventeen Theme verwendet haben.<\/p>\n<pre><code class=\"language-html\">body {font-family: 'Open <span id=\"urn:enhancement-210\" class=\"textannotation\">Sans<\/span>', <span id=\"urn:enhancement-350\" class=\"textannotation\">Arial<\/span>, <span id=\"urn:enhancement-200\" class=\"textannotation\">sans-serif<\/span>;}\nh1,h2,h3,h4,h5,h6 {font-family:'Open <span id=\"urn:enhancement-211\" class=\"textannotation\">Sans<\/span>', <span id=\"urn:enhancement-351\" class=\"textannotation\">Arial<\/span>, <span id=\"urn:enhancement-201\" class=\"textannotation\">sans-serif<\/span>;}<\/code><\/pre>\n<p>Hier ist ein Screenshot vom Simple Custom CSS and JS Plugin.<\/p>\n<figure id=\"attachment_9596\" aria-describedby=\"caption-attachment-9596\" style=\"width: 2066px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9596 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/custom-css-local-fonts-open-sans.jpg\" alt=\"CSS f\u00fcr lokal gehostete Open Sans Schriftart\" width=\"2066\" height=\"1245\"><figcaption id=\"caption-attachment-9596\" class=\"wp-caption-text\">CSS f\u00fcr lokal gehostete Open Sans Schriftart<\/figcaption><\/figure>\n<h4>Schritt 5<\/h4>\n<p>Wenn dein WordPress Theme bereits Google Fonts integriert hat, solltest du sicherstellen, dass du sie deaktivierst. Das mag ein wenig ironisch erscheinen, da wir ja Google Fonts verwenden. Aber der Grund, warum du das tun musst, ist, um die externen Anfragen zu deaktivieren. Da wir in diesem Tutorial das Twenty Seventeen Theme verwenden, nutzen wir das kostenlose <a href=\"https:\/\/wordpress.org\/plugins\/disable-google-fonts\/\">Plugin Disable Google Fonts<\/a>. Dies funktioniert nur f\u00fcr die Standard-Themes in WordPress. F\u00fcr die meisten Themes musst du dich wahrscheinlich an den Entwickler wenden und er kann schnell eine Funktion zum Deaktivieren von Google Fonts bereitstellen. Oder schaue in der Dokumentation nach, in der Regel ist dies ein sehr schneller Tweak. Einige Themes haben sogar eine Option, um sie im Backend ein- oder auszuschalten.<\/p>\n<p>Und das war&#8217;s! Hier ist ein Screenshot unserer neuen Google Open Sans Schriftart, die im Twenty Seventeen Theme f\u00fcr den Body und die Header geladen wird.<\/p>\n<figure id=\"attachment_9597\" aria-describedby=\"caption-attachment-9597\" style=\"width: 1495px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9597 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/example-local-fonts-open-sans.jpg\" alt=\"Beispiel einer lokal gehosteten Open Sans Schrift\" width=\"1495\" height=\"1234\"><figcaption id=\"caption-attachment-9597\" class=\"wp-caption-text\">Beispiel einer lokal gehosteten Open Sans Schrift<\/figcaption><\/figure>\n<p>Und hier ist ein Screenshot von unseren Anfragen. Wie du sehen kannst, haben wir nur 2 Anfragen f\u00fcr die WOFF2-Fonts, anstatt der 4 Anfragen von Google, die wir vorher gezeigt haben. Wir haben die WOFF-Fonts auch auf unserer Webseite, aber da Chrome WOFF2 unterst\u00fctzt, werden diese stattdessen gezogen. H\u00e4tten wir die Webseite z.B. mit dem IE 11 aufgerufen, w\u00e4ren stattdessen die WOFF-Fonts geladen worden.<\/p>\n<figure id=\"attachment_9598\" aria-describedby=\"caption-attachment-9598\" style=\"width: 1683px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9598 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/open-sans-http-requests.jpg\" alt=\"Open Sans HTTP Anfragen\" width=\"1683\" height=\"1066\"><figcaption id=\"caption-attachment-9598\" class=\"wp-caption-text\">Open Sans HTTP Anfragen<\/figcaption><\/figure>\n<h2>Zusammenfassung<\/h2>\n<p>Und das war&#8217;s! Du wei\u00dft jetzt, wie du lokale Fonts von einem Premium-Font-Shop hostest oder Google Fonts auf deinen eigenen Server und\/oder ins CDN verschiebst. Jetzt kannst du einen Blick auf all die sch\u00f6nen Schriften da drau\u00dfen werfen, ohne dir Gedanken dar\u00fcber zu machen, wie sie die Performance beeinflussen. Sie k\u00f6nnten deiner WordPress Seite das neue Gesicht geben, das sie braucht (lies unbedingt unseren ausf\u00fchrlichen Guide \u00fcber <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-fonts\/\">WordPress Fonts<\/a>)! Und wenn du dich fragst, warum wir keine lokalen Schriftarten verwenden, dann liegt das daran, dass wir an einem neuen Design f\u00fcr unsere Webseite arbeiten. Eine weitere gro\u00dfartige Alternative, die du in Betracht ziehen solltest, sind <a href=\"https:\/\/woorkup.com\/system-font\/\">Systemschriften<\/a>.<\/p>\n<p>Wir w\u00fcrden uns freuen zu h\u00f6ren, wie dein Setup ist. Nutzt du einen Drittanbieter, um deine Webfonts zu laden und hast du schon versucht, lokal zu hosten?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wenn es um das Hosten und Verwenden von Schriftarten auf deiner WordPress Seite geht, gibt es viele verschiedene M\u00f6glichkeiten. Du kannst sie lokal hosten, du kannst &#8230;<\/p>\n","protected":false},"author":38,"featured_media":40162,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[30,29],"topic":[1012,1001],"class_list":["post-40160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webperf","tag-wordpress","topic-wordpress-website-design","topic-wordpress-schriftarten"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ausf\u00fchrliche Anleitung zum Hosten lokaler Schriftarten in WordPress<\/title>\n<meta name=\"description\" content=\"Schau dir diese ausf\u00fchrliche Anleitung zum Hosten von lokalen Schriftarten in WordPress an. Beispiele sind die Verwendung einer Premium-Schriftart sowie das Verschieben einer Google-Schriftart auf deinen eigenen Server.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ausf\u00fchrliche Anleitung zum Hosten lokaler Schriftarten in WordPress\" \/>\n<meta property=\"og:description\" content=\"Schau dir diese ausf\u00fchrliche Anleitung zum Hosten von lokalen Schriftarten in WordPress an. Beispiele sind die Verwendung einer Premium-Schriftart sowie das Verschieben einer Google-Schriftart auf deinen eigenen Server.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fm.brianleejackson\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-14T12:25:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-29T05:44:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/01\/local-fonts-wordpress-de.png\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"384\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Brian Jackson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Schau dir diese ausf\u00fchrliche Anleitung zum Hosten von lokalen Schriftarten in WordPress an. Beispiele sind die Verwendung einer Premium-Schriftart sowie das Verschieben einer Google-Schriftart auf deinen eigenen Server.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/01\/local-fonts-wordpress-de.png\" \/>\n<meta name=\"twitter:creator\" content=\"@brianleejackson\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Jackson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"18\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/\"},\"author\":{\"name\":\"Brian Jackson\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\"},\"headline\":\"Ausf\u00fchrliche Anleitung zum Hosten lokaler Schriftarten in WordPress\",\"datePublished\":\"2021-04-14T12:25:49+00:00\",\"dateModified\":\"2023-08-29T05:44:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/\"},\"wordCount\":3165,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/01\/local-fonts-wordpress-de.png\",\"keywords\":[\"webperf\",\"WordPress\"],\"articleSection\":[\"WordPress Leistungstutorials\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/\",\"name\":\"Ausf\u00fchrliche Anleitung zum Hosten lokaler Schriftarten in WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/01\/local-fonts-wordpress-de.png\",\"datePublished\":\"2021-04-14T12:25:49+00:00\",\"dateModified\":\"2023-08-29T05:44:27+00:00\",\"description\":\"Schau dir diese ausf\u00fchrliche Anleitung zum Hosten von lokalen Schriftarten in WordPress an. Beispiele sind die Verwendung einer Premium-Schriftart sowie das Verschieben einer Google-Schriftart auf deinen eigenen Server.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/01\/local-fonts-wordpress-de.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/01\/local-fonts-wordpress-de.png\",\"width\":768,\"height\":384,\"caption\":\"local-fonts-wordpress-de\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Website Design\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-website-design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ausf\u00fchrliche Anleitung zum Hosten lokaler Schriftarten in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\",\"name\":\"Brian Jackson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"caption\":\"Brian Jackson\"},\"description\":\"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fm.brianleejackson\",\"https:\/\/www.linkedin.com\/in\/brianleejackson\",\"https:\/\/x.com\/brianleejackson\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/brianjackson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ausf\u00fchrliche Anleitung zum Hosten lokaler Schriftarten in WordPress","description":"Schau dir diese ausf\u00fchrliche Anleitung zum Hosten von lokalen Schriftarten in WordPress an. Beispiele sind die Verwendung einer Premium-Schriftart sowie das Verschieben einer Google-Schriftart auf deinen eigenen Server.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/","og_locale":"de_DE","og_type":"article","og_title":"Ausf\u00fchrliche Anleitung zum Hosten lokaler Schriftarten in WordPress","og_description":"Schau dir diese ausf\u00fchrliche Anleitung zum Hosten von lokalen Schriftarten in WordPress an. Beispiele sind die Verwendung einer Premium-Schriftart sowie das Verschieben einer Google-Schriftart auf deinen eigenen Server.","og_url":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_author":"https:\/\/www.facebook.com\/fm.brianleejackson","article_published_time":"2021-04-14T12:25:49+00:00","article_modified_time":"2023-08-29T05:44:27+00:00","og_image":[{"width":768,"height":384,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/01\/local-fonts-wordpress-de.png","type":"image\/png"}],"author":"Brian Jackson","twitter_card":"summary_large_image","twitter_description":"Schau dir diese ausf\u00fchrliche Anleitung zum Hosten von lokalen Schriftarten in WordPress an. Beispiele sind die Verwendung einer Premium-Schriftart sowie das Verschieben einer Google-Schriftart auf deinen eigenen Server.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/01\/local-fonts-wordpress-de.png","twitter_creator":"@brianleejackson","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Brian Jackson","Gesch\u00e4tzte Lesezeit":"18\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/"},"author":{"name":"Brian Jackson","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7"},"headline":"Ausf\u00fchrliche Anleitung zum Hosten lokaler Schriftarten in WordPress","datePublished":"2021-04-14T12:25:49+00:00","dateModified":"2023-08-29T05:44:27+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/"},"wordCount":3165,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/01\/local-fonts-wordpress-de.png","keywords":["webperf","WordPress"],"articleSection":["WordPress Leistungstutorials"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/","url":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/","name":"Ausf\u00fchrliche Anleitung zum Hosten lokaler Schriftarten in WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/01\/local-fonts-wordpress-de.png","datePublished":"2021-04-14T12:25:49+00:00","dateModified":"2023-08-29T05:44:27+00:00","description":"Schau dir diese ausf\u00fchrliche Anleitung zum Hosten von lokalen Schriftarten in WordPress an. Beispiele sind die Verwendung einer Premium-Schriftart sowie das Verschieben einer Google-Schriftart auf deinen eigenen Server.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/01\/local-fonts-wordpress-de.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/01\/local-fonts-wordpress-de.png","width":768,"height":384,"caption":"local-fonts-wordpress-de"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Website Design","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-website-design\/"},{"@type":"ListItem","position":3,"name":"Ausf\u00fchrliche Anleitung zum Hosten lokaler Schriftarten in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7","name":"Brian Jackson","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","caption":"Brian Jackson"},"description":"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.","sameAs":["https:\/\/www.facebook.com\/fm.brianleejackson","https:\/\/www.linkedin.com\/in\/brianleejackson","https:\/\/x.com\/brianleejackson"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/brianjackson\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/40160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=40160"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/40160\/revisions"}],"predecessor-version":[{"id":42032,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/40160\/revisions\/42032"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40160\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40160\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40160\/translations\/fr"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40160\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40160\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40160\/translations\/jp"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/40160\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/40162"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=40160"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=40160"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=40160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}