{"id":73073,"date":"2024-11-25T07:00:00","date_gmt":"2024-11-25T15:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=73073"},"modified":"2025-05-27T08:10:19","modified_gmt":"2025-05-27T15:10:19","slug":"core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/","title":{"rendered":"Core Web Vitals: Wie du die Leistungsprobleme von Web-Schriften vermeidest"},"content":{"rendered":"\n<p>Web-Schriftarten bringen Pers\u00f6nlichkeit auf deine Seite, aber sie erh\u00f6hen auch das Datenvolumen.<\/p>\n\n\n<p>Und wenn deine Schriftarten zu lange zum Laden brauchen, starren die Nutzer auf einen leeren Bildschirm. Noch schlimmer, deine Website k\u00f6nnte instabil wirken, da der Text unerwartet verschoben wird.<\/p>\n\n\n<p>Dies schadet auch den <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/improve-core-web-vitals\/\" rel=\"noopener\">Core Web Vitals<\/a> \u2014 den Metriken, die direkt Dein Suchranking und Benutzererlebnis beeinflussen.<\/p>\n\n\n<p>Hier z\u00e4hlt jede Millisekunde.<\/p>\n\n\n<p>Wie kannst Du Deine Wahl der Web-Schriften beibehalten, ohne die Leistung zu beeintr\u00e4chtigen?<\/p>\n\n\n<p>Lass es uns Schritt f\u00fcr Schritt angehen.<\/p>\n\n\n<p>Aber zuerst, was sind genau web-sichere Schriftarten und Web-Schriftarten?<\/p>\n\n\n<h2 id=\"h-what-are-web-safe-fonts\" class=\"wp-block-heading\">Was Sind Web-Sichere Schriftarten?<\/h2>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/web-safe-fonts\/\" rel=\"noopener\">Web-sichere Schriftarten<\/a> sind die bew\u00e4hrten Optionen, die \u00fcberall funktionieren. Es sind Schriftarten, die die meisten Ger\u00e4te bereits haben, was bedeutet, dass Du Dich darauf verlassen kannst, dass sie schnell laden.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"877\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_.webp\" alt=\"Diagramm, das erkl\u00e4rt, was Webseiten-Schriftarten sind; zeigt eine Verbindung von einem Server zu einem Browser und umgekehrt, sowie vom Browser zum Computer des Benutzers und Schriftarten zur\u00fcck zum Browser\" class=\"wp-image-58001 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-300x164.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1024x561.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-768x421.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1536x842.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-600x329.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1200x658.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-730x400.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1460x800.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-784x430.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1568x859.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-877x481.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/877;\" \/><\/figure>\n\n\n<p>Hier sind die web-sicheren Schriftarten, die Du verwenden kannst:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Arial<\/li>\n\n\n\n<li>Times New Roman<\/li>\n\n\n\n<li>Verdana<\/li>\n\n\n\n<li>Trebuchet MS<\/li>\n\n\n\n<li>Courier<\/li>\n\n\n\n<li>Impact<\/li>\n\n\n\n<li>Georgia<\/li>\n\n\n\n<li>Comic Sans MS<\/li>\n\n\n<\/ul>\n\n\n<p>Auch mit begrenzten Auswahlm\u00f6glichkeiten kann ein geschickter Designer diese Schriftarten kreativ nutzen.<\/p>\n\n\n<p>Aber, websichere Schriftarten werden oft \u00fcberstrapaziert und verleihen Deiner Website ein \u201e<em>\u00e4hnliches<\/em>\u201c Gef\u00fchl \u2014 selbst wenn Du viel M\u00fche und Geld in das Design der Website gesteckt hast.<\/p>\n\n\n<p>Wie machst Du es sch\u00f6ner?<\/p>\n\n\n<p>Mit Web-Schriftarten.<\/p>\n\n\n<h2 id=\"h2_what-are-web-fonts\" class=\"wp-block-heading\">Was Sind Web-Schriften?<\/h2>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"885\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts.webp\" alt=\"Beispiel verschiedener Google-Schriften, die den Satz &quot;Jeder hat das Recht auf Freiheit des Denkens&quot; in drei verschiedenen Schriftarten zeigen\" class=\"wp-image-58002 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-300x166.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1024x566.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-768x425.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1536x850.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-600x332.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1200x664.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-730x404.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1460x808.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-784x434.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1568x867.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-877x485.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/885;\" \/><\/figure>\n\n\n<p>Web-Schriftarten erm\u00f6glichen es dir, von den oft \u00fcberm\u00e4\u00dfig genutzten websicheren Schriftarten wegzukommen.<\/p>\n\n\n<p>Anstatt auf Schriftarten zu setzen, die auf dem Ger\u00e4t eines Benutzers verf\u00fcgbar sind, k\u00f6nnen Web-Schriftarten von einer externen Quelle wie <a target=\"_blank\" href=\"https:\/\/fonts.google.com\/\" rel=\"noopener\">Google Fonts<\/a> oder direkt von deinem Server auf das Ger\u00e4t deines Benutzers <em>(vor\u00fcbergehend)<\/em> heruntergeladen werden.<\/p>\n\n\n<p>Dies erm\u00f6glicht es Dir, jede benutzerdefinierte Schriftart zu verwenden, die zu Deiner Marke oder Deinen Designanforderungen passt.<\/p>\n\n\n<p>Wir haben auch die <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/best-google-fonts\/\" rel=\"noopener\">besten Google-Schriften<\/a> zusammengestellt, um Dir den Einstieg zu erleichtern.<\/p>\n\n\n<p>Wenn ein Nutzer Deine Seite besucht, wird die Web-Schriftart vor\u00fcbergehend heruntergeladen und mithilfe der <strong><code>@font-face<\/code><\/strong>-Regel in CSS auf den Text angewendet.<\/p>\n\n\n<p>Webfonts verhalten sich dann wie lokale Schriftarten \u2014 Sie passen sich automatisch den Bildschirmgr\u00f6\u00dfen an und halten deine Webseite scharf.<\/p>\n\n\n<p>Schriften haben sich ebenfalls weiterentwickelt, um effizientere Speicherformate zu haben. \u00c4hnlich wie <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/optimize-images-for-web\/\" rel=\"noopener\">Bildformate<\/a>, verf\u00fcgen Schriften \u00fcber TTF, WOFF, WOFF2 und EOT.<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Embedded OpenType (EOT):<\/strong> Kompatibel mit \u00e4lteren Versionen von Internet Explorer (unter IE9). Standardm\u00e4\u00dfig nicht komprimiert, aber GZIP-Kompression kann angewendet werden.<\/li>\n\n\n\n<li><strong>TrueType (TTF):<\/strong> Unterst\u00fctzt von \u00e4lteren Android-Browsern (unter Version 4.4). Standardm\u00e4\u00dfig nicht komprimiert, kann aber GZIP-komprimiert werden.<\/li>\n\n\n\n<li><strong>Web Open Font Format (WOFF):<\/strong> Unterst\u00fctzt von den meisten modernen Browsern und beinhaltet eingebaute Kompression.<\/li>\n\n\n\n<li><strong>Web Open Font Format 2 (WOFF2):<\/strong> Kompatibel mit Browsern, die es unterst\u00fctzen, und bietet spezielle Kompressionsalgorithmen, die die Dateigr\u00f6\u00dfe im Vergleich zu anderen Formaten um etwa 30% reduzieren.<\/li>\n\n\n<\/ul>\n\n\n<p>Die modernen Formate bieten Komprimierung f\u00fcr eine bessere Leistung und helfen dabei, das Design deiner Website sowohl funktional als auch visuell einzigartig zu halten.<\/p>\n\n\n<h2 id=\"h2_what-are-core-web-vitals-cwv-metrics\" class=\"wp-block-heading\">Was Sind Core Web Vitals (CWV) Metriken?<\/h2>\n\n\n<p>Hier ist die Sache: Google m\u00f6chte, dass alle seine Nutzer eine ausgezeichnete Erfahrung haben.<\/p>\n\n\n<p>Welche Website oder App den Nutzern von Google das beste Erlebnis bietet, wird mehr &#8220;Liebe&#8221; von den Algorithmen von Google erhalten.<\/p>\n\n\n<p>Und wie wird diese \u201e<strong><em>Erfahrung<\/em><\/strong>\u201c gemessen?<\/p>\n\n\n<p>Google hat die Core Web Vitals <a target=\"_blank\" href=\"https:\/\/web.dev\/articles\/vitals#core-web-vitals\" rel=\"noopener\">Anfang 2020<\/a> genau zu diesem Zweck eingef\u00fchrt.<\/p>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/improve-core-web-vitals\/\" rel=\"noopener\">CWV<\/a> ist ein Set von drei Metriken, das Google zeigt, wie deine Webseite oder App f\u00fcr die Benutzer, die sie dorthin senden, performt.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1468\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls.webp\" alt=\"LCP vs INP vs CLS zeigt verschiedene Messwerte auf einer Skala von Gut-Bedarf Verbesserung-Schlecht\" class=\"wp-image-58003 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-300x275.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1024x940.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-768x705.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1536x1409.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-600x551.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1200x1101.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-730x670.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1460x1340.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-784x719.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1568x1439.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-877x805.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1468;\" \/><\/figure>\n\n\n<p>H\u00f6here Werte bei diesen Kennzahlen k\u00f6nnen dir helfen, bei Google h\u00f6her zu ranken. Lass uns diese Kennzahlen schnell durchgehen.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Gr\u00f6\u00dfter Inhaltlicher Anstrich (LCP)<\/h3>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/largest-contentful-paint\/\" rel=\"noopener\"><strong>LCP<\/strong><\/a><strong> misst, wie lange es dauert, bis das gr\u00f6\u00dfte sichtbare Element auf Deiner Seite geladen ist.<\/strong><\/p>\n\n\n<p>Dies ist im Allgemeinen ein Bild oder Video, kann aber auch ein gro\u00dfer Textblock oder ein eingebettetes Video sein.<\/p>\n\n\n<p>Je schneller dies passiert, desto besser funktioniert deine Website in den Augen der Nutzer und Suchmaschinen.<\/p>\n\n\n<p>Ein guter LCP-Wert bedeutet, dass die Nutzer nicht darauf warten m\u00fcssen, dass der Hauptinhalt erscheint.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interaction-to-next-paint-inp\">Interaktion Bis Zum N\u00e4chsten Anstrich (INP)<\/h3>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/inp-interaction-to-next-paint\/\" rel=\"noopener\"><strong>INP<\/strong><\/a><strong> misst die Zeit zwischen einer Benutzerinteraktion (wie Klicken oder Tippen) und der visuellen Reaktion der Seite.<\/strong><\/p>\n\n\n<p>Es bietet ein genaueres Bild der Interaktivit\u00e4t als FID, da es die gesamte Benutzerreise ber\u00fccksichtigt und nicht nur die erste Interaktion.<\/p>\n\n\n<p>Ein niedriger INP-Wert bedeutet, dass deine Website reaktionsschnell wirkt, was das Benutzerengagement und die Zufriedenheit verbessert.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Kumulative Layoutverschiebung (CLS)<\/h3>\n\n\n<p><strong>CLS misst, wie stabil deine Seite beim Laden ist.<\/strong><\/p>\n\n\n<p>Wenn Elemente unerwartet herumspringen, frustriert das die Nutzer und l\u00e4sst die Seite unzuverl\u00e4ssig erscheinen.<\/p>\n\n\n<p>Ein niedriger CLS-Wert bedeutet, dass deine Seite reibungslos l\u00e4dt, ohne Layoutverschiebungen, die das Benutzererlebnis st\u00f6ren.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"h2_how-to-optimize-web-fonts-for-better-core-web-vitals\" class=\"wp-block-heading\">Wie Du Web-Schriftarten Optimierst F\u00fcr Bessere Core Web Vitals<\/h2>\n\n\n<p>Also, worum geht es bei der Leistung von Web-Schriften?<\/p>\n\n\n<p>Warum k\u00f6nnen wir nicht einfach Web-Schriften hinzuf\u00fcgen und es dabei belassen? Nun, Du kannst das.<\/p>\n\n\n<p>Aber wie wir bereits besprochen haben, sind Web-Schriften nicht lokal. Sie werden von einem Server abgerufen, heruntergeladen und auf Deiner Website angewendet, und genau dort liegt das Problem.<\/p>\n\n\n<p><strong>Es dauert Zeit.<\/strong><\/p>\n\n\n<p>Und wenn es zu lange dauert, beeinflusst es deine Core Web Vitals und <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/increase-website-conversion-rate\/\" rel=\"noopener\">Website-Konversionsrate.<\/a><\/p>\n\n\n<p>Lass uns einige M\u00f6glichkeiten betrachten, Web-Fonts zu optimieren, um bessere Core Web Vitals zu erreichen.<\/p>\n\n\n<h3 class=\"wp-block-heading\">1. Schriftarten Vorladen<\/h3>\n\n\n<p>Du m\u00f6chtest, dass deine Schriftarten bereit sind, sobald die Seite zu laden beginnt.<\/p>\n\n\n<p>Wenn die Seite f\u00fcr den Benutzer bereit ist, ist es auch die Schriftart.<\/p>\n\n\n<p>Das nennt man <a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/preload\" rel=\"noopener\"><strong>Vorladen<\/strong><\/a>.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"627\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1024x627.webp\" alt=\"Preloading-Zeiten in einem horizontalen Balkendiagramm: index.html reicht von 0ms-280ms, main.css von 50ms bis 380 ms und so weiter\" class=\"wp-image-58004 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1024x627.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-300x184.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-768x470.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1536x940.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-600x367.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1200x734.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-730x447.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1460x893.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-784x480.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1568x959.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-877x537.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/627;\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.bramstein.com\/writing\/preload-hints-for-web-fonts.html\" target=\"_blank\" rel=\"noreferrer noopener\">Quelle<\/a><\/figcaption><\/figure>\n\n\n<p>Preloading sagt dem Browser: \u201e<em>Hey, diese Schriftart ist wichtig. Bitte lade sie sofort.<\/em>\u201c<\/p>\n\n\n<p>Nehmen wir an, Du verwendest die beliebte <a target=\"_blank\" href=\"https:\/\/fonts.google.com\/specimen\/Roboto\" rel=\"noopener\">Google-Schriftart, Roboto<\/a>.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"814\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font.webp\" alt=\"screenshot of Google Fonts example using Roboto with text in Roboto font &quot;Wo Missachtung und Verachtung der Menschenrechte gef\u00fchrt haben&quot; \" class=\"wp-image-58005 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-300x153.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1024x521.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-768x391.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1536x781.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-600x305.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1200x611.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-730x371.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1460x743.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-784x399.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1568x798.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-877x446.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/814;\" \/><\/figure>\n\n\n<p>Du musst deinem HTML-Code ein einzelnes Attribut hinzuf\u00fcgen, um die Schriftart vorzuladen: <strong><code>rel = \u201cpreload\u201d<\/code><\/strong><\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap\" as=\"font\" type=\"font\/woff2\" crossorigin&gt;<\/code><\/pre>\n\n\n<p>Nach diesem Vorgang wei\u00df der Browser, dass er das Herunterladen von Roboto priorisieren soll, sodass dein Text schneller mit der richtigen Schriftart angezeigt wird.<\/p>\n\n\n<p>Dies reduziert die Zeit, die es dauert, bis der gr\u00f6\u00dfte Textblock (LCP) gerendert wird, sodass die Nutzer schneller die endg\u00fcltige Version deiner Website sehen.<\/p>\n\n\n<h3 class=\"wp-block-heading\">2. Steuere Das Laden Von Schriften Mit Der Font-Display-Eigenschaft<\/h3>\n\n\n<p>Allerdings k\u00f6nnte das Vorladen die anf\u00e4ngliche Ladezeit ein wenig erh\u00f6hen, da den Schriftarten Priorit\u00e4t einger\u00e4umt wird.<\/p>\n\n\n<p>Die <strong><code>font-display Eigenschaft<\/code><\/strong> erm\u00f6glicht es dir zu steuern, wie sich dein Text verh\u00e4lt, w\u00e4hrend benutzerdefinierte Schriften noch geladen werden.<\/p>\n\n\n<p>Dies kann dir helfen, das gef\u00fcrchtete <strong>Flash of Invisible Text (FOIT),<\/strong> bei dem Nutzer leere Fl\u00e4chen sehen, und das <strong>Flash of Unstyled Text (FOUT),<\/strong> bei dem die Seite kurzzeitig mit Ersatzschriftarten erscheint und sofort auf benutzerdefinierte Schriftarten wechselt, zu vermeiden.<\/p>\n\n\n<p>Die <code>font-display Eigenschaft<\/code> bietet vier M\u00f6glichkeiten, das Textverhalten zu steuern: block, swap, fallback und optional.<\/p>\n\n\n<p>Lass uns die beiden anschauen, die Du ben\u00f6tigen w\u00fcrdest.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1243\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load.webp\" alt=\"Linien-Diagramme zeigen die Auswirkungen von Schriftanzeigewerten auf die Ladezeit der Seite zwischen block, swap, fallback und optional\" class=\"wp-image-58006 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-300x233.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1024x796.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-768x597.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1536x1193.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-600x466.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1200x932.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-730x567.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1460x1134.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-784x609.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1568x1218.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-877x681.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1243;\" \/><\/figure>\n\n\n<p><strong><code>font-display: swap<\/code><\/strong> \u2014 Diese Option ist die sicherste Wahl f\u00fcr die meisten Websites. Sie stellt sicher, dass Text sofort mit einer Ersatzschriftart erscheint und wechselt zur benutzerdefinierten Schriftart, sobald diese verf\u00fcgbar ist.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');\n  font-display: swap;\n}<\/code><\/pre>\n\n\n<p>Hier wird die Ersatzschriftart (wie Arial oder eine andere Systemschriftart) sofort geladen, was die Seite lesbar h\u00e4lt.<\/p>\n\n\n<p>Wenn Roboto heruntergeladen wird, ersetzt es die Ersatzschriftart, ohne einen leeren Platz auf dem Bildschirm zu hinterlassen.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"624\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display.webp\" alt=\"screenshot &quot;font-display:swap&quot; mit Text: das ist ein Absatz. Das ist schwererer Text (fett gedruckt). Das ist betonter Text (kursiv). Das ist schwererer und betonter Text (kursiv und fett). \" class=\"wp-image-58007 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-300x117.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1024x399.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-768x300.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1536x599.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-600x234.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1200x468.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-730x285.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1460x569.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-784x306.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1568x612.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-877x342.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/624;\" \/><\/figure>\n\n\n<p>Hier ist eine <a target=\"_blank\" href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display.html\" rel=\"noopener\">Demo davon, wie sich font-display swap<\/a> in der realen Welt verh\u00e4lt.<\/p>\n\n\n<p><strong><code>font-display: optional<\/code><\/strong> \u2014 Wenn Dir die Geschwindigkeit wichtig ist, gibt dies dem Browser den Befehl, die benutzerdefinierte Schriftart zu \u00fcberspringen, falls sie nicht schnell genug geladen wird. Das funktioniert, wenn es Dir nichts ausmacht, dass das Ersatzschriftbild bestehen bleibt.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');\n  font-display: optional;\n}<\/code><\/pre>\n\n\n<p>Diese Option macht Sinn, wenn die Leistung wichtiger ist als das Design, was sie perfekt f\u00fcr eine Website macht, bei der alles um Geschwindigkeit geht.<\/p>\n\n\n<p>Hier ist <a target=\"_blank\" href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display-optional.html\" rel=\"noopener\">ein Beispiel<\/a> daf\u00fcr, wie das in der realen Welt aussieht. Du wirst den Wechsel hier nicht bemerken, da die meisten Schriftarten schnell genug laden.<\/p>\n\n\n<p>Allerdings ist das optionale Argument gro\u00dfartig, falls Dein Schriftserver ausf\u00e4llt oder langsam wird.<\/p>\n\n\n<h3 class=\"wp-block-heading\">3. Schriftarten Subsetten<\/h3>\n\n\n<p>Die meisten Schriftarten enthalten hunderte, sogar tausende, von Zeichen.<\/p>\n\n\n<p>Wahrscheinlich ben\u00f6tigst Du nur einen kleinen Teil davon. Das Entfernen davon wird als Font-Subsetting bezeichnet.<\/p>\n\n\n<p>Das stimmt, Du kannst unn\u00f6tige Zeichen entfernen, um die Gr\u00f6\u00dfe der Schriftdatei zu reduzieren.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"800\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting.webp\" alt=\"eine abstrakte Illustration, die das Font-Subsetting zeigt, bei dem der Buchstabe \u201ea\u201c aus einer gr\u00f6\u00dferen Fontdatei extrahiert und getrennt wird\" class=\"wp-image-58008 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-300x150.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1024x512.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-768x384.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1536x768.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-600x300.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1200x600.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-730x365.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1460x730.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-784x392.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1568x784.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-877x439.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/800;\" \/><\/figure>\n\n\n<p>Nehmen wir an, deine Website ben\u00f6tigt nur englische Zeichen.<\/p>\n\n\n<p>Ein Werkzeug wie <a target=\"_blank\" href=\"https:\/\/github.com\/fonttools\/fonttools\" rel=\"noopener\">FontTools<\/a> kann dir helfen, deine Schriftart so zu unterteilen, dass nur die Zeichen enthalten sind, die du tats\u00e4chlich verwenden wirst.<\/p>\n\n\n<p>Dies bedeutet, dass alle Unicode-Zeichen, die in der englischen Sprache nicht notwendig sind, entfernt werden k\u00f6nnen, um die Dateigr\u00f6\u00dfe zu sparen.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Unicode<\/h3>\n    <p>Der Unicode-Standard ist ein internationales Kodierungssystem. Es weist jedem Zeichen in jeder Sprache eine eindeutige Nummer zu, damit das Zeichen ger\u00e4te-, plattform- und sprach\u00fcbergreifend dargestellt werden kann.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/unicode\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr Lesen                    <\/a>\n\n<\/div>\n\n\n<p>Dies reduziert die Dateigr\u00f6\u00dfe von beispielsweise 80 KB auf 30 KB.<\/p>\n\n\n<p>Kleinere Dateien bedeuten schnellere Downloads, was sowohl LCP als auch CLS verbessert, da die Schriftart schnell l\u00e4dt und das Layout nicht verschiebt.<\/p>\n\n\n<p>Hier ist ein Beispiel, wie Du alles au\u00dfer englischen Zeichen mit FontTools entfernen w\u00fcrdest:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F<\/code><\/pre>\n\n\n<p>Jetzt enth\u00e4lt deine Roboto-Schriftart nur die grundlegenden lateinischen Zeichen, die f\u00fcr englischen Text ben\u00f6tigt werden, wodurch sie viel schneller geladen wird.<\/p>\n\n\n<p>Wenn Du eine GUI-basierte Methode bevorzugst, kannst Du auch <a target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" rel=\"noopener\">font-squirrel ausprobieren<\/a>. Sobald Du eine Schriftdatei hochgeladen hast, erh\u00e4ltst Du viele Anpassungsm\u00f6glichkeiten zum Hinzuf\u00fcgen oder Entfernen<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1112\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel.webp\" alt=\"Eine Web-Oberfl\u00e4che f\u00fcr Font Squirrels Webfont Generator, die Schriftumwandlungsoptionen und Formatierungseinstellungen zeigt.\" class=\"wp-image-58009 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-300x209.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1024x712.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-768x534.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1536x1068.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-600x417.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1200x834.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-730x507.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1460x1015.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-784x545.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1568x1090.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-877x610.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1112;\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\">4. Schriftarten Komprimieren<\/h3>\n\n\n<p>Moderne Schriftformate wie WOFF2 bieten eine Komprimierung, die die Schriftgr\u00f6\u00dfe im Vergleich zu \u00e4lteren Formaten wie TTF um bis zu 30% reduzieren kann.<\/p>\n\n\n<p>Die Verwendung der am st\u00e4rksten komprimierten Version deiner Schriftart kann deren Auswirkungen auf die Ladezeit der Seite erheblich reduzieren.<\/p>\n\n\n<p>Zum Beispiel, hier ist, wie Du sicherstellen kannst, dass Du WOFF2 verwendest:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('roboto.woff2') format('woff2'),\n       url('roboto.woff') format('woff');\n  font-weight: 400;\n}<\/code><\/pre>\n\n\n<p>Auf diese Weise werden Browser, die WOFF2 unterst\u00fctzen, es standardm\u00e4\u00dfig verwenden, wodurch Ladezeiten reduziert werden, w\u00e4hrend weiterhin eine klare, hochwertige Schriftart angezeigt wird.<\/p>\n\n\n<p>Allerdings, wenn ein Browser WOFF2 nicht verwenden kann, wird standardm\u00e4\u00dfig auf WOFF zur\u00fcckgegriffen.<\/p>\n\n\n<h3 class=\"wp-block-heading\">5. Base64-Codierung<\/h3>\n\n\n<p>Dies ist eine weitere h\u00e4ufig verwendete Praxis, um Deine Web-Schriftarten zu optimieren.<\/p>\n\n\n<p>Allerdings musst Du vorsichtig sein, wann Du Base64-kodierte Schriftarten verwendest.<\/p>\n\n\n<p><strong>Base64-Codierung ist am n\u00fctzlichsten f\u00fcr kleine Schriftarten oder Symbole.<\/strong><\/p>\n\n\n<p>Wenn es jedoch \u00fcberm\u00e4\u00dfig verwendet wird, kann das CSS aufgebl\u00e4ht werden, wodurch die Ladezeit der Seite mehr erh\u00f6ht wird, als nur die Schriftart selbst zu verwenden.<\/p>\n\n\n<p>Wenn Du Base64-Codierung f\u00fcr eine Icon-Schriftart verwenden m\u00f6chtest, m\u00fcsstest Du zuerst die Schriftartdatei in das Base64-Format konvertieren. So k\u00f6nnte es aussehen:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'CustomIcons';\n  src: url('data:font\/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');\n  font-weight: normal;\n  font-style: normal;\n}<\/code><\/pre>\n\n\n<p>Diese Methode funktioniert gut f\u00fcr kleine Symbol-Schriften, die Du h\u00e4ufig auf der gesamten Website verwendest.<\/p>\n\n\n<p>Die CSS-Datei wird mit der eingebetteten Schriftart geladen, wodurch eine zus\u00e4tzliche HTTP-Anfrage entf\u00e4llt.<\/p>\n\n\n<p>Allerdings solltest Du dies bei gro\u00dfen Schriftarten vermeiden, da es das erste Rendern der Seite verlangsamen kann.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-lt-link-vs-css-import-for-fonts\">6. <code>&lt;link><\/code> vs. CSS <code>@import<\/code> f\u00fcr Schriftarten<\/h3>\n\n\n<p><code>&lt;link&gt;<\/code> und <code>@import<\/code> haben einen erheblichen Unterschied in der Ladeleistung.<\/p>\n\n\n<p>Das <code>&lt;link&gt;<\/code>-Tag l\u00e4dt Schriftarten asynchron, was bedeutet, dass es den Rest deiner Seite nicht davon abh\u00e4lt, gerendert zu werden, w\u00e4hrend <code>@import<\/code> etwas langsamer ist.<\/p>\n\n\n<p><strong>Verwende <code>&lt;link&gt;<\/code> wann immer m\u00f6glich.<\/strong><\/p>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u201eIn \u00fcber 90% der F\u00e4lle m\u00f6chtest Du wahrscheinlich das <code>&lt;link><\/code>-Tag verwenden. Als Faustregel solltest Du <code>@import<\/code>-Regeln vermeiden, da sie das Laden der eingebundenen Ressource verz\u00f6gern, bis die Datei abgerufen ist.\u201c <\/em><a href=\"https:\/\/stackoverflow.com\/questions\/12316501\/including-google-fonts-link-or-import\" target=\"_blank\" rel=\"noopener\"><em>Ilya Grigorik<\/em><\/a><em>, Ingenieur und technischer Berater des CEO bei Shopify<\/em><\/p>\n\n\n<\/blockquote>\n\n\n<p>Es l\u00e4dt Schriftarten unabh\u00e4ngig, sodass der Rest der Seite geladen wird, ohne auf die Schriftartendatei warten zu m\u00fcssen.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href= \"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap\"><\/code><\/pre>\n\n\n<p>Dies ist die bevorzugte Methode zum Laden von Google Fonts oder \u00e4hnlichen externen Schriftartendiensten.<\/p>\n\n\n<p>Im <code>&lt;head><\/code>-Bereich deines HTML platziert, stellt es sicher, dass die Schriftart fr\u00fchzeitig geladen wird, ohne andere Ressourcen zu blockieren.<\/p>\n\n\n<p><strong>Vermeide <code>@import<\/code> f\u00fcr wichtige Schriftarten.<\/strong><\/p>\n\n\n<p><code>@import<\/code> wartet, bis die CSS-Datei vollst\u00e4ndig geladen ist, was die Ladezeit erh\u00f6hen und das LCP beeintr\u00e4chtigen kann.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap');<\/code><\/pre>\n\n\n<p>Die Verwendung von <code>@import<\/code> funktioniert nur f\u00fcr sekund\u00e4re oder weniger wichtige Schriftarten. Vermeide es f\u00fcr alles auf dem ersten Bildschirm des Inhalts.<\/p>\n\n\n<h3 class=\"wp-block-heading\">7. Reduziere Visuelle Verschiebungen\/CLS Durch Schriftanpassung Und Gr\u00f6\u00dfenanpassung<\/h3>\n\n\n<p>Visuelle Verschiebungen \u2014 oder kumulative Layoutverschiebungen (CLS), wie Google sie nennt \u2014 treten auf, wenn sich das Layout unerwartet \u00e4ndert, oft durch Schriftartenwechsel.<\/p>\n\n\n<p>Um diesen Effekt zu minimieren, w\u00e4hle Fallback-Schriftarten, die dem Stil und den Abmessungen deiner benutzerdefinierten Schriftart \u00e4hnlich sind.<\/p>\n\n\n<p>Die Eigenschaft <strong><code>CSS size-adjust<\/code><\/strong> erm\u00f6glicht es Dir auch, die Gr\u00f6\u00dfe der Ersatzschriftart zu steuern, um visuelle Verschiebungen zu reduzieren, wenn die benutzerdefinierte Schriftart geladen wird.<\/p>\n\n\n<p>Wenn deine benutzerdefinierte Schriftart Roboto und eine Ersatzschriftart ist, passe ihre Gr\u00f6\u00dfe an, um sie mit Roboto abzustimmen, sodass der \u00dcbergang nahezu nahtlos ist.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('roboto.woff2') format('woff2');\n  font-display: swap;\n  size-adjust: 100%;\n}<\/code><\/pre>\n\n\n<p>Hier sorgt Robotos Ersatzschriftart (z. B. Arial) f\u00fcr eine gleichbleibende Gr\u00f6\u00dfe, wodurch jede sp\u00fcrbare Bewegung reduziert wird, wenn Roboto vollst\u00e4ndig geladen ist.<\/p>\n\n\n<p>Wenn Du die Gr\u00f6\u00dfe und den Abstand des Fallbacks mit Deiner benutzerdefinierten Schriftart abgleichst, stellst Du sicher, dass, wenn Roboto Arial ersetzt, die Verschiebung minimal ist, was das CLS niedrig h\u00e4lt und die Benutzererfahrung verbessert.<\/p>\n\n\n<h3 class=\"wp-block-heading\">8. Den Richtigen Ort Zum Hosten Von Web-Schriften Finden<\/h3>\n\n\n<p>Das Selbsthosten deiner Schriftarten bedeutet nicht immer eine schnellere Leistung.<\/p>\n\n\n<p>Viele Drittanbieteroptionen funktionieren ebenfalls gut\u2014und manchmal k\u00f6nnen sie sogar schneller laden.<\/p>\n\n\n<p>Der <a target=\"_blank\" href=\"https:\/\/almanac.httparchive.org\/en\/2020\/fonts#fig-7\" rel=\"noopener\">Web Almanac<\/a> stellte fest, dass bestimmte Websites mit Schriftarten von Drittanbietern schneller geladen wurden als solche mit selbstgehosteten Schriftarten.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1500\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_.webp\" alt=\"Balkendiagramm, das die Ladezeiten von FCP und LCP f\u00fcr selbstgehostete, externe und kombinierte Schriftarten-Hostingmethoden vergleicht, wobei das kombinierte Hosting am langsamsten ist.\" class=\"wp-image-58010 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-300x281.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1024x960.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-768x720.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1536x1440.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-600x563.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1200x1125.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-730x684.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1460x1369.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-784x735.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1568x1470.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-877x822.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1500;\" \/><\/figure>\n\n\n<p>Letztendlich h\u00e4ngt die Schriftleistung weniger von der Hosting-Wahl ab und mehr von drei Schl\u00fcsselfaktoren:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Content Delivery Network (CDN):<\/strong> Sorgt f\u00fcr eine schnellere Auslieferung, indem Schriftarten von verschiedenen Standorten weltweit bereitgestellt werden.<\/li>\n\n\n\n<li><strong>HTTP\/2:<\/strong> Erh\u00f6ht die Ladegeschwindigkeit, indem mehrere Anfragen parallel bearbeitet werden, wodurch die Latenz reduziert wird.<\/li>\n\n\n\n<li><strong>Web-Caching-Richtlinie:<\/strong> Speichert Schriftarten effizient, sodass sie nicht bei jedem Besuch neu heruntergeladen werden m\u00fcssen.<\/li>\n\n\n<\/ul>\n\n\n<p>Konzentriere Dich darauf, diese Grundlagen einzurichten, anstatt Dich in der Hosting-Diskussion zu verfangen, damit Deine Schriftarten reibungslos geladen werden, egal wo sie gehostet sind.<\/p>\n\n\n<h2 id=\"h2_how-to-simplify-web-performance-optimization\" class=\"wp-block-heading\">Wie Du Die Web-Performance-Optimierung Vereinfachst<\/h2>\n\n\n<p>Wenn dir die oben genannten Techniken zu aufwendig erscheinen, kann ein <a target=\"_blank\" href=\"https:\/\/automattic.pxf.io\/OrN6xZ\" rel=\"noopener\">Plugin wie Jetpack<\/a> dies vereinfachen.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"602\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1024x602.webp\" alt=\"Marketing-Landingpage, die Jetpacks WordPress-Optimierungsfunktionen mit Grafiken zu Leistungskennzahlen und mobilen Ger\u00e4ten zeigt.\" class=\"wp-image-58011 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1024x602.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-300x176.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-768x452.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1536x903.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-600x353.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1200x706.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-730x429.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1460x859.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-784x461.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1568x922.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-877x516.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/602;\" \/><\/figure>\n\n\n<p>Jetpack, <a target=\"_blank\" href=\"https:\/\/github.com\/Automattic\/jetpack\" rel=\"noopener\">entwickelt von Automattic<\/a> (den Erstellern von WordPress), ist eine All-in-One-L\u00f6sung, die speziell f\u00fcr WordPress-Seiten entwickelt wurde.<\/p>\n\n\n<p>Es kombiniert wesentliche Funktionen f\u00fcr Sicherheit, Leistung und Marketing, die alle von einer Plattform aus verwaltet werden.<\/p>\n\n\n<p>Auch wenn Du nicht technisch versiert bist, kann Jetpack dabei helfen, die Seiten-Geschwindigkeit zu verbessern, die Sicherheit zu st\u00e4rken und das Benutzererlebnis zu erh\u00f6hen. (Keine komplexen Einrichtungen notwendig!)<\/p>\n\n\n<h2 id=\"h2_create-the-perfect-balance-between-beauty-and-performance\" class=\"wp-block-heading\">Schaffe Die Perfekte Balance Zwischen Sch\u00f6nheit Und Leistung<\/h2>\n\n\n<p>Web-Schriftarten verleihen deiner Seite ein einzigartiges, sch\u00f6nes Aussehen.<\/p>\n\n\n<p>Allerdings k\u00f6nnen sie ohne die richtigen Anpassungen die Seite auch verlangsamen und die Benutzer frustrieren.<\/p>\n\n\n<p>Obwohl wir grundlegende Schriftarten-Optimierungstechniken behandelt haben, erfordert die Feinabstimmung der Leistung unz\u00e4hlige technische Details.<\/p>\n\n\n<p>Und die besten Ergebnisse zu erzielen, kann \u00fcberw\u00e4ltigend sein.<\/p>\n\n\n<p>Genau hier kommen <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/pro-services\/\" rel=\"noopener\">DreamHosts professionelle Webentwicklungsdienste<\/a> ins Spiel.<\/p>\n\n\n<p>Wir sorgen daf\u00fcr, dass deine Website sch\u00f6n und optimiert f\u00fcr Geschwindigkeit und Benutzererfahrung ist.<\/p>\n\n\n<p>Lass uns die technischen Details \u00fcbernehmen, w\u00e4hrend Du Dich darauf konzentrierst, eine Website zu erstellen, die wirklich herausragt.<\/p>\n\n\n\n<div class=\"article-cta-shared article-cta-small article-cta--product\">\n\t<div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-pro-services-development-877x586.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-pro-services-development.webp 2x\"  \/><\/div>\n\n\t<a href='https:\/\/www.dreamhost.com\/pro-services\/development\/' class='link-top' target='_blank' rel='noopener noreferrer'>\n\t\t<span>Pro Services &#8211; Development<\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" width=\"15\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n\n\t<div class=\"content-btm\">\n\t\t<h2 class=\"h2--md\">\n\t\t\tYou Dream It, We Code It\n\t\t<\/h2>\n\t\t<p class=\"p--md\">\n\t\t\tTap into 20+ years of development expertise. Just let us know what you want for your site \u2013 we\u2019ll take it from there.\n\t\t<\/p>\n\n\t\t        <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            See More                    <\/a>\n\n\t<\/div>\n<\/div>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<p><em>Diese Seite enth\u00e4lt Affiliate-Links. Das bedeutet, dass wir eine Provision verdienen k\u00f6nnen, wenn Du Dienstleistungen \u00fcber unseren Link kaufst, ohne dass Dir zus\u00e4tzliche Kosten entstehen.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Webfonts k\u00f6nnen die Core Web Vitals Ihrer Website beeinflussen. Erfahre einfache Tipps, um Webfonts zu optimieren und deine Website schnell und benutzerfreundlich zu halten.<\/p>\n","protected":false},"author":1058,"featured_media":58013,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Web-Schriften k\u00f6nnen die Core Web Vitals deiner Website beeinflussen. Lerne einfache Tipps, um Web-Schriften zu optimieren und deine Website schnell und benutzerfreundlich zu halten.","toc_headlines":"","hide_toc":false,"footnotes":""},"categories":[14509],"tags":[],"class_list":["post-73073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Core Web Vitals: Wie du die Leistungsprobleme von Web-Schriften vermeidest - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Web-Schriften k\u00f6nnen die Core Web Vitals deiner Website beeinflussen. Lerne einfache Tipps, um Web-Schriften zu optimieren und deine Website schnell und benutzerfreundlich zu halten.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Core Web Vitals: Wie du die Leistungsprobleme von Web-Schriften vermeidest\" \/>\n<meta property=\"og:description\" content=\"Web-Schriften k\u00f6nnen die Core Web Vitals deiner Website beeinflussen. Lerne einfache Tipps, um Web-Schriften zu optimieren und deine Website schnell und benutzerfreundlich zu halten.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-25T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-27T15:10:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Core Web Vitals: Wie du die Leistungsprobleme von Web-Schriften vermeidest - DreamHost Blog","description":"Web-Schriften k\u00f6nnen die Core Web Vitals deiner Website beeinflussen. Lerne einfache Tipps, um Web-Schriften zu optimieren und deine Website schnell und benutzerfreundlich zu halten.","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:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/","og_locale":"en_US","og_type":"article","og_title":"Core Web Vitals: Wie du die Leistungsprobleme von Web-Schriften vermeidest","og_description":"Web-Schriften k\u00f6nnen die Core Web Vitals deiner Website beeinflussen. Lerne einfache Tipps, um Web-Schriften zu optimieren und deine Website schnell und benutzerfreundlich zu halten.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-11-25T15:00:00+00:00","article_modified_time":"2025-05-27T15:10:19+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Core Web Vitals: Wie du die Leistungsprobleme von Web-Schriften vermeidest","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2025-05-27T15:10:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/"},"wordCount":2434,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","articleSection":["Webdesign"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/","name":"Core Web Vitals: Wie du die Leistungsprobleme von Web-Schriften vermeidest - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2025-05-27T15:10:19+00:00","description":"Web-Schriften k\u00f6nnen die Core Web Vitals deiner Website beeinflussen. Lerne einfache Tipps, um Web-Schriften zu optimieren und deine Website schnell und benutzerfreundlich zu halten.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","width":1460,"height":1095,"caption":"Core Web Vitals: How to Avoid the Performance Pitfalls of Web Fonts"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/core-web-vitals-wie-du-die-leistungsprobleme-von-web-schriften-vermeidest-de\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Core Web Vitals: Wie du die Leistungsprobleme von Web-Schriften vermeidest"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"de","translations":{"de":73073,"es":58033,"en":58000,"it":68795,"fr":71167,"nl":71194,"pt":72377,"uk":72392,"pl":72423,"ru":73076},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/73073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=73073"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/73073\/revisions"}],"predecessor-version":[{"id":73075,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/73073\/revisions\/73075"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/58013"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=73073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=73073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=73073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}