{"id":29389,"date":"2019-11-06T00:59:53","date_gmt":"2019-11-06T08:59:53","guid":{"rendered":"https:\/\/kinqsta.com\/?p=55983"},"modified":"2025-09-01T16:40:28","modified_gmt":"2025-09-01T15:40:28","slug":"wie-man-fonts-in-wordpress-aendert","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/","title":{"rendered":"Wie man Fonts in WordPress \u00e4ndert (und die Gr\u00f6\u00dfe, Farbe \u00e4ndert und sie Optimiert)"},"content":{"rendered":"<p>Fonts k\u00f6nnen den Unterschied zwischen einer langweiligen und einer sch\u00f6nen Webseite ausmachen. Indem du lernst, wie man die <a href=\"https:\/\/kinqsta.com\/de\/blog\/moderne-schriften\/\">Schriftart in WordPress<\/a> \u00e4ndert, kannst du deine Webseite modern, professionell und gebrandet aussehen lassen.<\/p>\n<p>Aber was ist der beste Weg, um <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-fonts\/\">Schriften in deiner WordPress-Seite zu verwenden<\/a>, und wie w\u00e4hlst du die richtigen Schriften f\u00fcr dein Theme?<\/p>\n<p>In diesem Leitfaden werde ich dich durch alles f\u00fchren, was du \u00fcber Schriften in WordPress wissen musst. Du wirst mehr \u00fcber folgendes erfahren:<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2 id=\"terminology\">Fonts: Die Terminologie<\/h2>\n<p>Beginnen wir mit einem Blick auf die Terminologie rund um Fonts im Web.<\/p>\n<ul>\n<li>Webfonts (aka <a href=\"https:\/\/kinqsta.com\/de\/blog\/html-fonts\/\">HTML-Schriftarten<\/a>) sind Fonts, die auf einer Webseite eines Drittanbieters gehostet und mit denen auf deiner Webseite verlinkt ist.<\/li>\n<li><a href=\"https:\/\/kinqsta.com\/de\/blog\/lokaler-schriftarten\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lokal gehostete Fonts<\/a> sind genau das (auf den Servern deiner Webseite gehostet).<\/li>\n<li>Websichere Schriften sind eine begrenzte Anzahl von Schriften, die auf (fast) allen Computern vorinstalliert sind und auf die du ziemlich sicher sein kannst, dass alle deine Besucher Zugriff haben.<\/li>\n<\/ul>\n<p>Werfen wir einen Blick auf die Optionen zum Hinzuf\u00fcgen von Fonts zu deiner Webseite.<\/p>\n<h2 id=\"options\">Wie man Schriften zu deiner WordPress-Seite hinzuf\u00fcgt (die Optionen)<\/h2>\n<p>Bevor du in das Hinzuf\u00fcgen von Schriften zu deiner Webseite einsteigst, hilft es dir, wenn du die dir zur Verf\u00fcgung stehenden Optionen verstehst.<\/p>\n<p>Fonts sind Teil des Designs deiner Webseite, daher werden sie in den meisten F\u00e4llen \u00fcber dein Theme programmiert &#8211; aber nicht immer. In einigen F\u00e4llen kannst du dich entscheiden, ein Plugin zu verwenden, um eine gr\u00f6\u00dfere Auswahl an Schriften auf deiner Webseite zu erm\u00f6glichen.<\/p>\n<p>Hier sind einige der Optionen, die dir zur Verf\u00fcgung stehen:<\/p>\n<ul>\n<li>Verwende Webfonts wie <a href=\"https:\/\/kinqsta.com\/de\/blog\/besten-google-fonts\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a>, indem du ein Plugin installierst, das dir Zugriff gew\u00e4hrt.<\/li>\n<li>Verwende Webfonts, indem du sie in dein Theme programmierst und in eine Reihe stellst (nicht so kompliziert wie es klingt).<\/li>\n<li>Hoste deine Schriften auf deiner eigenen Webseite und f\u00fcge sie <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-theme-installiert\/\">deinem Theme<\/a> hinzu.<\/li>\n<\/ul>\n<p>Es gibt zwei Hauptunterschiede &#8211; ob du Webfonts verwendest, die au\u00dferhalb deiner Webseite gehostet werden, oder ob du deine Fontdateien selbst hosten m\u00f6chtest. In diesem Leitfaden werden wir uns mit den Vor- und Nachteilen jedes einzelnen befassen.<\/p>\n<p>Beginnen wir mit einem Blick auf Webfonts: Warum du dich entscheiden k\u00f6nntest, sie zu verwenden und wie du sie zu deiner Webseite hinzuf\u00fcgen kannst.<\/p>\n<h2 id=\"webfonts\">Verwendung von Webfonts in WordPress<\/h2>\n<p>Webfonts sind die beliebteste Art, Schriften zu deiner Webseite hinzuzuf\u00fcgen, da sie es einfach machen, eine gro\u00dfe Auswahl an Schriften hinzuzuf\u00fcgen.<\/p>\n<h3>Was sind Webfonts?<\/h3>\n<p>Webfonts sind Fonts, die auf der Webseite eines Drittanbieters gehostet werden. Anstatt die Dateien auf deine eigene Webseite zu kopieren, verlinkst du auf die Webseite des Anbieters und sie werden von dort aus abgerufen.<\/p>\n<p>Das bedeutet, dass du Zugriff auf eine gro\u00dfe Auswahl an Schriften hast, ohne den Serverplatz auf deinem eigenen Hosting nutzen zu m\u00fcssen. Es bedeutet auch, dass du, wenn sich die Schriftartendateien im Laufe der Zeit \u00e4ndern sollten, deine Dateien nicht aktualisieren musst und automatisch Zugriff auf die neuen Versionen der Dateien vom Anbieter hast.<\/p>\n<p>Webfonts k\u00f6nnen kostenlos sein oder du kannst sie bezahlen, normalerweise \u00fcber ein Abonnement. Einige beliebte Anbieter sind:<\/p>\n<ul>\n<li><a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google-Fonts<\/a>. Der gr\u00f6\u00dfte Anbieter von kostenlosen Webfonts. Du kannst auch alle ihre Schriften auf deinen Computer herunterladen, d.h. wenn du Offline-Materialien mit den selben Schriften wie deine Webseite erstellen m\u00f6chtest, kannst du das tun. Und alles ist kostenlos.<\/li>\n<li><a href=\"https:\/\/edgewebfonts.adobe.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Edge Webfonts<\/a>. Diese sind ebenfalls kostenlos. Sie sind zwar f\u00fcr die Verwendung mit Adobe-Produkten konzipiert, funktionieren aber auf jeder Webseite gut.<\/li>\n<li><a href=\"https:\/\/www.fonts.com\/browse\" target=\"_blank\" rel=\"noopener noreferrer\">Fonts.com<\/a> ist ein Premium-Anbieter von Schriften, die du m\u00f6glicherweise verwenden musst, wenn du deine Web-Schrift an eine Schriftart aus deinem Druckmaterial anpassen musst und die Schriftart nicht \u00fcber einen kostenlosen Anbieter erh\u00e4ltlich ist.<\/li>\n<li><a href=\"https:\/\/www.fontfabric.com\/fonts\/\" target=\"_blank\" rel=\"noopener noreferrer\">fontfabric<\/a> ist ein Schriftdesigner, der Premium-Schriften f\u00fcr den Einsatz als Webfonts und online anbietet. Du musst f\u00fcr diese bezahlen, bekommst aber etwas Individuelleres als wenn du Google-Schriften benutzt h\u00e4ttest.<\/li>\n<\/ul>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/09\/google-fonts.jpg\" alt=\"Google Fonts\" width=\"1500\" height=\"849\"><figcaption class=\"wp-caption-text\">Google Fonts<\/figcaption><\/figure>\n<p>Alle diese Anbieter erm\u00f6glichen es dir, die Schriften direkt von ihren Servern aus zu verwenden, indem du einen Code zu <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-website-kosten\/\" target=\"_blank\" rel=\"noopener noreferrer\">deiner WordPress-Seite<\/a> hinzuf\u00fcgst oder manchmal <a href=\"https:\/\/kinqsta.com\/de\/thema\/wordpress-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">ein Plugin verwendest<\/a>, das bedeutet, dass du keinen Code hinzuf\u00fcgen musst.<\/p>\n<p>Webfonts unterscheiden sich von websicheren Fonts. Du kannst diese als Fallback f\u00fcr Webfonts verwenden, nur f\u00fcr den Fall, dass dein Webseiten-Besucher aus irgendeinem Grund keine Verbindung zur Webfonts herstellen kann. Ich werde dir sp\u00e4ter in diesem Beitrag zeigen, wie man das macht.<\/p>\n<h3>Warum Webfonts verwenden?<\/h3>\n<p>Jetzt wei\u00dft du also, was Webfonts sind, warum w\u00fcrdest du sie verwenden, anstatt deine eigenen Fonts zu hosten?<\/p>\n<p>Hier sind einige der Vorteile:<\/p>\n<ul>\n<li>Einfachheit: Das Hinzuf\u00fcgen von ein paar Zeilen Code oder die Installation eines Plugins ist schneller als das Herunterladen und Hochladen der Schriftdateien und macht es einfacher, die Schriftarten zu \u00e4ndern, wenn du dich in Zukunft daf\u00fcr entscheidest.<\/li>\n<li>Auswahl an Schriften: Es gibt Tausende von Fonts, die als Webfonts verf\u00fcgbar sind, und die Liste w\u00e4chst st\u00e4ndig.<\/li>\n<li>Aktualisierungen: Wenn die Font-Datei aktualisiert werden muss, z.B. um variable Schriften hinzuzuf\u00fcgen (mehr davon in K\u00fcrze) oder um zus\u00e4tzliche Zeichen hinzuzuf\u00fcgen, hat deine Webseite Zugriff auf die neue Version, ohne dass du etwas tun musst.<\/li>\n<\/ul>\n<p>Die meisten Webseiten verwenden Webfonts, mit einer websicheren Schriftart als Backup. Und mit WordPress ist es sehr einfach.<\/p>\n<h3>Finden der besten Webfonts f\u00fcr deine Webseite<\/h3>\n<p>Nachdem du dich entschieden hast, Webfonts zu verwenden, hast du jetzt eine schwierige Entscheidung zu treffen: Welche Schriften sollst du verwenden?<\/p>\n<p>In den guten alten Zeiten, in denen alle Webentwickler Zugang zu diesen vorinstallierten websicheren Schriften hatten, war dies eine sehr einfache Entscheidung. Willst du eine Serifenschrift oder eine Serifenlose verwenden? (Serifenschriften haben eine kleine Linie oder einen Strich am Ende eines gr\u00f6\u00dferen Strichs in jedem Zeichen, serifenlose Schriften nicht.) Nachdem du diese Entscheidung getroffen hast, waren deine Entscheidungen sehr begrenzt.<\/p>\n<p>Aber jetzt hast du die Qual der Wahl.<\/p>\n<p>Hier sind einige Tipps, die dir helfen sollen, die beste Schriftart f\u00fcr deine Webseite auszuw\u00e4hlen:<\/p>\n<ul>\n<li>Schaut euch eure Druckerzeugnisse an. Werden bereits Schriften verwendet, die du als Web-Schriften finden kannst? Wenn nicht, kannst du etwas \u00c4hnliches finden?<\/li>\n<li>Sieh dir die Webseiten deiner Mitbewerber an. Welche Arten von Schriften verwenden sie? Ich empfehle dir nicht, sie zu kopieren, aber es kann bestimmte Stile geben, die den Benutzern deiner Webseite die richtige Art von Bild vermitteln.<\/li>\n<li>\u00dcberlege, welche Art von Stimmung du mit deinen Fonts vermitteln m\u00f6chtest. Einige Fonts sehen moderner aus, andere traditioneller. Einige machen Spa\u00df, andere sind ernster.<\/li>\n<li>Halte dich an Fonts, die <a href=\"https:\/\/kinqsta.com\/de\/thema\/content-strategie\/#give-readers-your-very-best\" target=\"_blank\" rel=\"noopener noreferrer\">f\u00fcr Flie\u00dftext gut lesbar sind<\/a>, und verwende interessantere Fonts f\u00fcr Schlagzeilen, wenn du willst.<\/li>\n<li>W\u00e4hle aus <a href=\"https:\/\/kinqsta.com\/de\/blog\/besten-google-fonts\/\" target=\"_blank\" rel=\"noopener noreferrer\">den beliebtesten Google-Schriften<\/a> &#8211; diese sind den Besuchern der Webseite vertraut und leicht zu lesen.<\/li>\n<\/ul>\n<p>Sobald du deine Schriften ausgew\u00e4hlt hast, kannst du einige Zeit damit experimentieren. Schriftanbieter wie Google Fonts lassen dich benutzerdefinierten Text eingeben, um zu sehen, wie er in deiner gew\u00e4hlten Schriftart aussieht. Sobald du deinen eigenen Text in der Schriftart siehst, kann es dir helfen zu entscheiden, ob das die richtige Schriftart f\u00fcr dich ist.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/experimentiere-mit-deinen-fonts.jpg\" alt=\"Experimentiere mit deinen Fonts\" width=\"1500\" height=\"369\"><figcaption class=\"wp-caption-text\">Experimentiere mit deinen Fonts<\/figcaption><\/figure>\n<p>Und denk daran, die Verwendung von Webfonts macht es sehr einfach, deine Fonts zu \u00e4ndern, so dass du jederzeit zu einer anderen Option wechseln kannst, w\u00e4hrend du dein <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-entwickler-engagiert\/\" target=\"_blank\" rel=\"noopener noreferrer\">Theme entwickelst<\/a> oder deine Webseite einrichtest.<\/p>\n<h3>Wie man Webfonts mit einem WordPress Plugin hinzuf\u00fcgt<\/h3>\n<p>Du hast also die von dir gew\u00e4hlte Schriftart gew\u00e4hlt, jetzt ist es an der Zeit, sie zu deiner Webseite hinzuzuf\u00fcgen.<\/p>\n<p>Wenn du dich nicht wohl f\u00fchlst, Code zu deinen Themedateien hinzuzuf\u00fcgen, kannst du ein Plugin installieren, mit dem du auf Google-Schriften zugreifen und jede beliebige Schriftart auf deiner Webseite verwenden kannst.<\/p>\n<p>Das <a href=\"https:\/\/wordpress.org\/plugins\/olympus-google-fonts\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts Typography<\/a> Plugin erm\u00f6glicht dir den Zugriff auf die gesamte Bibliothek der Google-Schriften und deren \u00dcberpr\u00fcfung \u00fcber den WordPress Customizer.<\/p>\n<p><a href=\"https:\/\/kinqsta.com\/de\/blog\/so-installierst-wordpress-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">Installiere das Plugin<\/a> auf deiner Webseite wie jedes andere Plugin und aktiviere es dann.<\/p>\n<p>Gehe zu <strong>Appearance &gt; Customize<\/strong>, um auf den Customizer zuzugreifen. Du siehst einen Abschnitt f\u00fcr Google-<strong>Fonts<\/strong>.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/Google-Fonts-im-Customizer.jpg\" alt=\"Google Fonts i Customizer\" width=\"1500\" height=\"804\"><figcaption class=\"wp-caption-text\">Google Fonts Customizer<\/figcaption><\/figure>\n<p>Klicke auf diesen Link, um auf die Einstellungen f\u00fcr deine Fonts zuzugreifen. Konfiguriere sie wie folgt:<\/p>\n<p><strong>Grundeinstellungen<\/strong>: Konfiguriere die Standardschriftart f\u00fcr deinen Text und deine \u00dcberschriften sowie f\u00fcr alle Schaltfl\u00e4chen. Im Screenshot unten sieht man, dass ich eine leicht lesbare Serifenschrift f\u00fcr den Body und eine markantere Schrift f\u00fcr die \u00dcberschriften hinzugef\u00fcgt habe.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/grundeinstellungen-konigurieren.jpg\" alt=\"Die Grundeinstellungen Konfigurieren\" width=\"1500\" height=\"708\"><figcaption class=\"wp-caption-text\">Die Grundeinstellungen Konfigurieren<\/figcaption><\/figure>\n<p><strong>Erweiterte Einstellungen<\/strong>: Hier kannst du Branding (Seitentitel und Beschreibung), Navigation (dein Men\u00fc), Inhalte und \u00dcberschriften detaillierter konfigurieren, deine Seitenleiste und Fu\u00dfzeile. Du kannst auch Schriften laden, ohne sie irgendetwas zuzuordnen, was bedeutet, dass du sie zu jedem benutzerdefinierten CSS im Customizer hinzuf\u00fcgen kannst.<\/p>\n<p><strong>Laden der Schriftart:<\/strong> Wenn es irgendwelche Schriftarten gibt, die du nicht brauchst (z.B. fett gedruckt, kursiv, diese Art von Dingen), kannst du sie hier deaktivieren, damit sie deine Webseite nicht unn\u00f6tig verlangsamen.<\/p>\n<p><strong>Debugging<\/strong>: Verwende dies, um zu erzwingen, dass alle Schriften angezeigt werden, wenn sie nicht wie gew\u00fcnscht funktionieren.<\/p>\n<p>Nimm dir etwas Zeit, um mit diesen Einstellungen zu arbeiten und sie im Customizer zu testen, um sicherzustellen, dass sie so funktionieren, wie du es willst. Wenn du mit deinen Einstellungen zufrieden bist, klicke auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong>. Verlasse den Customizer nicht, ohne auf <strong>Ver\u00f6ffentlichen<\/strong> zu klicken, da du sonst deine \u00c4nderungen verlierst.<\/p>\n<h4>Bearbeiten von Schriftfarben<\/h4>\n<p>Die kostenlose Version des Plugins erlaubt es dir nicht, die Farben deiner Schriften zu bearbeiten. Dazu musst du entweder die Premium-Version kaufen oder die Option<strong> Additional CSS<\/strong> im Customizer verwenden.<\/p>\n<p>Gehe zur\u00fcck zum Startbildschirm des Customizers und klicke auf die Registerkarte <strong>Additional CSS<\/strong>. Es wird dir ein leerer Textbereich angezeigt, in dem du dein eigenes CSS hinzuf\u00fcgen kannst.<\/p>\n<p>Um das Element zu finden, das du zum Stylen ben\u00f6tigst, w\u00e4hle es aus und benutze den <a href=\"https:\/\/www.lifewire.com\/get-inspect-element-tool-for-browser-756549\" target=\"_blank\" rel=\"noopener noreferrer\">Code Inspektor<\/a> in deinem Browser, um herauszufinden, welche Farbgebung es bereits hat.<\/p>\n<p>Unten benutze ich Google Chrome und habe auf ein h1-Element gezielt.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/code-inspizieren.jpg\" alt=\"Inspizieren deinen Code in Chrome\" width=\"1500\" height=\"774\"><figcaption class=\"wp-caption-text\">Inspizieren deinen Code in Chrome<\/figcaption><\/figure>\n<p>In meinem <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-theme-andern\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress-Theme<\/a> hat es seine Farbe vom Body-Element geerbt. Ich m\u00f6chte etwas Konkreteres hinzuf\u00fcgen. Gib im Textfeld f\u00fcr dein CSS das CSS f\u00fcr dein Element und die Farbe ein, die du verwenden m\u00f6chtest. Meins sieht so aus:<\/p>\n<pre><code class=\"language-css\">h1 {\n color: #f542f5;\n}<\/code><\/pre>\n<p>Jetzt habe ich ein tolles pinkes h1 Element:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/farbe-andern.jpg\" alt=\"Die Farbe des Headings \u00e4ndern\" width=\"1500\" height=\"781\"><figcaption class=\"wp-caption-text\">Die Farbe des Headings \u00e4ndern<\/figcaption><\/figure>\n<p>Du kannst dies mit allen Textelementen wiederholen, denen du Farbe hinzuf\u00fcgen m\u00f6chtest, und auch mit allen, die du auch benutzerdefinierte Schriften hinzuf\u00fcgen m\u00f6chtest, die nicht in den Optionen der anderen Bildschirme enthalten waren. Wenn du wissen m\u00f6chtest, welches CSS f\u00fcr Schriften verwendet werden soll, lies weiter im Abschnitt dieses Beitrags \u00fcber die \u00c4nderung deiner Schriften \u00fcber CSS.<\/p>\n<h3>Wie man Webfonts manuell hinzuf\u00fcgt<\/h3>\n<p>Wenn du kein zus\u00e4tzliches Plugin zu deiner Webseite hinzuf\u00fcgen m\u00f6chtest und Zugriff auf den Code f\u00fcr dein Theme hast, kannst du Webfonts installieren und verwenden, <a href=\"https:\/\/kinqsta.com\/de\/blog\/bearbeitest-wordpress-code\/\" target=\"_blank\" rel=\"noopener noreferrer\">indem du einen Code zu deiner Funktionsdatei und deinem Stylesheet hinzuf\u00fcgst.<\/a><\/p>\n<p>Wenn deine Webseite ein ma\u00dfgeschneidertes Theme verwendet, das du bearbeiten kannst, dann kannst du die Funktionsdatei und das Stylesheet aus deinem Theme bearbeiten. Aber wenn du ein Theme von Drittanbietern verwendest, das <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-theme-installiert\/\" target=\"_blank\" rel=\"noopener noreferrer\">du gekauft oder aus dem WordPress-Themeverzeichnis erhalten hast<\/a>, dann musst du <a href=\"https:\/\/kinqsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\" target=\"_blank\" rel=\"noopener noreferrer\">ein Child-Theme erstellen<\/a>. Du musst ihm dann zwei Dateien geben: <strong>functions.php<\/strong> und <strong>style.css<\/strong>.<\/p>\n<p>Lasst uns den Prozess des manuellen Hinzuf\u00fcgens von Webfonts zu eurem Theme durcharbeiten. Ich werde in diesem Beispiel mit Google Fonts arbeiten, da dies die am h\u00e4ufigsten verwendete und kostenlose Schriftart ist.<\/p>\n<h4>Auswahl einer Schriftart und Aufnahme des Links<\/h4>\n<p>Beginne, indem du deine Schriftart aus Google Fonts ausw\u00e4hlst. F\u00fcge es zu deiner Bibliothek hinzu, indem du auf das Plus-Symbol daneben klickst.<\/p>\n<p>Klicke auf die Registerkarte am unteren Bildschirmrand f\u00fcr deine Bibliothek und du wirst einige Codes sehen, die du zu deiner Webseite hinzuf\u00fcgen kannst. Wenn du zus\u00e4tzliche Schriftarten und -stile hinzuf\u00fcgen m\u00f6chtest, klicke auf die Registerkarte <strong>Anpassen<\/strong> und w\u00e4hle die gew\u00fcnschten aus. Gehe dann zur\u00fcck zur Registerkarte <strong>Embed<\/strong>.<\/p>\n<p>Kopiere den Code nicht genau: Du wirst ihn verwenden, aber anstatt die Schriftart im Abschnitt &lt;head&gt; des Headers deiner Webseite aufzurufen, wirst du die Schriftarten einreihen. Dies ist der richtige Weg, um es in WordPress zu tun.<\/p>\n<p>Also, in meinem Fall gibt mir Google Fonts diesen Code:<\/p>\n<p>Kopiere stattdessen aus dem Abschnitt Embed font nur den Link zur Schriftart.<\/p>\n<pre><code class=\"language-php\">&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Raleway\" rel=\"stylesheet\"&gt;<\/code><\/pre>\n<p>Ich muss aber nur das kopieren:<\/p>\n<pre><code class=\"language-php\">https:\/\/fonts.googleapis.com\/css?family=Raleway<\/code><\/pre>\n<h4>Einreihen der Schriftart(en)<\/h4>\n<p>\u00d6ffne die Funktionsdatei deines Themes und f\u00fcge folgendes hinzu, indem du den Link f\u00fcr meine Schriftart durch den Link ersetzt, den Google dir f\u00fcr deine gegeben hat:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_google_fonts() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Raleway');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );<\/code><\/pre>\n<p>Dadurch wird der Style von den Google Fonts-Servern angefordert. Wenn du in Zukunft weitere Schriften hinzuf\u00fcgen musst, kannst du entweder eine neue Zeile zu deiner Funktion hinzuf\u00fcgen oder sie in die selbe Zeile einf\u00fcgen:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_google_fonts() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Merriweather|Raleway');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );<\/code><\/pre>\n<p>Dadurch werden sowohl die Schriftarten Merriweather als auch Raleway in die Warteschlange gestellt.<\/p>\n<h4>Hinzuf\u00fcgen der Schriftart(en) zu dem Stylesheet<\/h4>\n<p>Dadurch funktioniert die Schriftart auf deiner Webseite noch nicht: Du musst sie trotzdem zum Stylesheet deines Themes hinzuf\u00fcgen.<\/p>\n<p>\u00d6ffne die Datei <strong>style.css<\/strong> in deinem Theme und f\u00fcge den Code hinzu, um einzelne Elemente mit deinen Webfonts zu gestalten. Stelle sicher, dass du es <a href=\"https:\/\/kinqsta.com\/de\/blog\/externes-css-kombiniert\/\" target=\"_blank\" rel=\"noopener noreferrer\">nach jedem vorhandenen CSS f\u00fcr Schriften hinzuf\u00fcgst<\/a>, sonst wird es m\u00f6glicherweise \u00fcberschrieben.<\/p>\n<p>Welche Elemente du stylest, h\u00e4ngt von dir ab, aber es ist \u00fcblich, eine lesbare Schrift f\u00fcr das Body-Element und etwas ausgefalleneres f\u00fcr die \u00dcberschriften zu verwenden.<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', sans-serif;\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', serif;\n}<\/code><\/pre>\n<p>In dem obigen Fall wird alles auf der Seite die Schriftart Raleway verwenden, mit Ausnahme der Elemente h1, h2 und h3, die Merriweather verwenden.<\/p>\n<p>Speicher jetzt dein Stylesheet und \u00fcberpr\u00fcfe deine Webseite, um sicherzustellen, dass alles wie erwartet funktioniert. Wenn die neuen Schriften nicht angezeigt werden, <a href=\"https:\/\/kinqsta.com\/de\/blog\/loschst-du-den-browser-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\">l\u00f6sche den Cache deines Browsers<\/a> und \u00fcberpr\u00fcfe, ob die Schriften nicht durch ein Styling f\u00fcr Schriften weiter unten im Stylesheet \u00fcberschrieben werden. Deshalb ist es eine gute Idee, entweder dein neues Styling am unteren Rand des Stylesheets hinzuzuf\u00fcgen oder das bestehende Styling durch dein neues Styling zu ersetzen (noch besser).<\/p>\n<h4>Hinzuf\u00fcgen einer Backup-Schriftart<\/h4>\n<p>Es kann Gelegenheiten geben, bei denen jemand deine Webseite besucht und aus irgendeinem Grund nicht auf die Webfont-Dateien zugreifen kann. Vielleicht sind sie auf einer schlechten Verbindung oder mit einem alten Ger\u00e4t, das keine Webfonts rendert. Oder vielleicht hat dein Webfont-Provider technische Probleme.<\/p>\n<p>Aus diesem Grund ist es eine gute Idee, ein Backup vor Ort zu haben.<\/p>\n<p>Der Code, den du von Google-Schriftarten erh\u00e4ltst, hat bereits ein Backup, das die einfache Angabe von <code>serif<\/code> or <code>sans-serif<\/code> enth\u00e4lt, aber wir k\u00f6nnen noch einen Schritt weiter gehen.<\/p>\n<p>Verwende eine der webf\u00e4higen Schriften, die bereits auf dem Computer deines Besuchers installiert sein werden, und f\u00fcge dann den zweiten Fallback von nur <code>serif <\/code>or <code>sans-serif<\/code> hinzu, falls sie ein mobiles Ger\u00e4t verwenden, das nicht einmal die webf\u00e4higen Schriften hat.<\/p>\n<p>Gehe zur\u00fcck zu deinem Stylesheet und bearbeite dein CSS, damit es so etwas wie dieses liest:<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', Helvetica, sans-serif;\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', Georgia, serif;\n}<\/code><\/pre>\n<p>Das bedeutet, dass die Besucher deiner Webseite deine Webfonts sehen werden, wenn alles in Ordnung ist; aber wenn nicht, werden sie Helvetica oder Georgia sehen, oder wenn dies nicht m\u00f6glich ist, werden sie sehen, welche Serifen- und Sans-Serifen-Schriften ihr Browser laden kann.<\/p>\n<h2 id=\"host\">Eigene Schriften in WordPress hosten<\/h2>\n<p>Einige Entwickler ziehen es vor, keine Webfonts zu verwenden, sondern Fonts auf ihren eigenen Servern zu hosten, und du k\u00f6nntest einer von ihnen sein.<\/p>\n<p>Dies kann aus einem oder mehreren Gr\u00fcnden erfolgen, einschlie\u00dflich <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-sicherheit\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sicherheit<\/a>, <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-performance-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">Leistung<\/a> oder Budget.<\/p>\n<p>Wenn du dir Sorgen um die Leistung machst, kannst du die Leistung deiner Webfonts auf verschiedene Weise optimieren, die sp\u00e4ter in diesem Beitrag behandelt werden. Aber wenn du dich entschieden hast, die lokale Route zu nehmen, musst du wissen, wie man es macht.<\/p>\n<h3>Warum eigene Schriften hosten?<\/h3>\n<p>Die Verwendung von Webfonts ist oft einfacher und kann dir mehr Flexibilit\u00e4t geben und gleichzeitig weniger Platz auf deinem Server einnehmen. Das bedeutet aber nicht, dass es keine Gelegenheiten gibt, bei denen das <a href=\"https:\/\/kinqsta.com\/de\/blog\/lokaler-schriftarten\/\" target=\"_blank\" rel=\"noopener noreferrer\">lokale Hosting von Schriften<\/a> nicht besser geeignet ist.<\/p>\n<p>Gr\u00fcnde, warum du Schriften lokal hosten solltest, sind unter anderem:<\/p>\n<p>Du wirst vielleicht feststellen, dass du einige dieser Probleme umgehen kannst.<\/p>\n<ul>\n<li>M\u00f6glicherweise zieht man es vor, aus Sicherheitsgr\u00fcnden keine Ressourcen von Drittanbietern einzubeziehen, da man wei\u00df, dass die Sicherheit der eigenen Webseite von einem selbst kontrolliert wird.<\/li>\n<li>Du wirst vielleicht feststellen, dass die <a href=\"https:\/\/kinqsta.com\/de\/blog\/leistung-drittanbietern\/\" target=\"_blank\" rel=\"noopener noreferrer\">Verwendung eines Dienstes eines Drittanbieters die Leistung deiner Webseite beeintr\u00e4chtigt<\/a>.<\/li>\n<li>Du hast vielleicht eine Schriftartendatei gekauft und m\u00f6chtest diese verwenden. Stelle sicher, dass deine Lizenz sowohl die Nutzung der Webseite als auch die Verwendung in gedruckten Materialien umfasst.<\/li>\n<li>Deine Webseite kann lokal gehostet werden, z.B. in einem Intranet, und Benutzer haben keinen Zugriff auf Webfonts, wenn sie sie verwenden.<\/li>\n<\/ul>\n<h3>Wo du Fonts findest, die du lokal hosten kannst<\/h3>\n<p>Viele Webfonts k\u00f6nnen auch f\u00fcr die Verwendung als lokal gehostete Fonts heruntergeladen werden, aber du musst \u00fcberpr\u00fcfen, ob dies durch die Lizenz erlaubt ist. Im Falle von Google Fonts ist dies erlaubt.<\/p>\n<p>Du wirst auch feststellen, dass es Fonts gibt, die nicht als Webfonts verf\u00fcgbar sind, die du selbst herunterladen und hosten kannst. Jede Schriftdatei, die du auf deinen Computer herunterladen kannst, kann auch auf deine Webseite hochgeladen und dort gespeichert werden. Wenn du eine Schriftart verwenden musst, die nicht als Webfonts verf\u00fcgbar ist, um sie mit deinem <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-site-beispiele\/\" target=\"_blank\" rel=\"noopener noreferrer\">Branding<\/a> zu verbinden, ist dies die L\u00f6sung, aber stelle sicher, dass deine Lizenz dies zul\u00e4sst.<\/p>\n<h3>So f\u00fcgt man lokal gehostete Schriften zu seiner WordPress-Seite hinzu<\/h3>\n<p>Du wei\u00dft also, dass du deine Fonts lokal hosten m\u00f6chtest, wie gehst du vor, um sie einzurichten?<\/p>\n<p>Der Prozess unterscheidet sich von der Verwendung von Webfonts. Du musst die <a href=\"https:\/\/kinqsta.com\/de\/blog\/maximale-upload-groesse-dateien-wordpress\/\">Datei(en) auf deine Webseite hochladen<\/a> und auf sie in deinem Stylesheet verlinken, ohne sie in deine Funktionsdatei einreihen zu m\u00fcssen.<\/p>\n<h4>Herunterladen und Konvertieren der Schriften<\/h4>\n<p>Lade zun\u00e4chst die gew\u00fcnschten Schriften herunter. In Google Fonts kannst du dies tun, indem du auf das Download-Symbol klickst, wenn du die Schrift in deiner Bibliothek ansiehst.<\/p>\n<figure id=\"attachment_56119\" aria-describedby=\"caption-attachment-56119\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56119 size-full\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/fonts-aus-google-fonts-downloaden.jpg\" alt=\"Fonts aus Google Fonts downloaden\" width=\"1500\" height=\"790\"><figcaption id=\"caption-attachment-56119\" class=\"wp-caption-text\">Fonts aus Google Fonts downloaden<\/figcaption><\/figure>\n<p>Entpacke die Schriftartendatei auf deinem Computer und l\u00f6sche alle Schriftarten, die du nicht auf deiner Webseite verwenden musst: Es hat keinen Sinn, Dateien hochzuladen, die du nicht verwenden wirst.<\/p>\n<p>Um auf deiner Webseite verwendet werden zu k\u00f6nnen, m\u00fcssen die Dateien im.woff-Format vorliegen. Wenn sie es nicht sind (das wird es nicht sein, wenn du sie von Google-Schriften hast), kannst du einen Dienst wie <a href=\"https:\/\/convertio.co\/ttf-woff\/\" target=\"_blank\" rel=\"noopener noreferrer\">Convertio<\/a> verwenden, um sie zu konvertieren.<\/p>\n<h4>Lade die Schriften zu deinem Theme hoch.<\/h4>\n<p>Lade nun die Schriftdatei(en) in <a href=\"https:\/\/kinqsta.com\/de\/blog\/kostenlose-vs-kostenpflichtige-wordpress-themes\/\">dein Theme<\/a> hoch, in <strong>wp-content\/themes\/themen\/themename<\/strong>, wobei <strong>themename<\/strong> der Ordner f\u00fcr dein Theme ist. Es ist eine gute Idee, alle Schriftartendateien in einen eigenen Ordner im Theme zu legen, z.B. einen <strong>Font<\/strong> Ordner.<\/p>\n<p>Wenn du mit einem Design von Drittanbietern arbeitest, <a href=\"https:\/\/kinqsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\" target=\"_blank\" rel=\"noopener noreferrer\">erstelle ein Child-Theme<\/a> f\u00fcr deine Schriftdateien und dein Stylesheet.<\/p>\n<p>Sobald du das getan hast, musst du die Schriftart zu deinem Stylesheet hinzuf\u00fcgen.<\/p>\n<h4>Hinzuf\u00fcgen der Schriften in CSS<\/h4>\n<p>\u00d6ffne das Stylesheet deines Themes.<\/p>\n<p>F\u00fcge Code wie diesen hinzu und ersetze die von mir verwendeten Schriften durch deine eigenen:<\/p>\n<pre><code class=\"language-css\">@font-face {\n font-family: \u2018Raleway';\n src: url( \u201cfonts\/Raleway-Medium.ttf\u201d) format(\u2018woff\u2019); \/* medium *\/\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \u2018Raleway';\n src: url( \u201cfonts\/Raleway-Bold.ttf\u201d) format(\u2018woff\u2019); \/* medium *\/\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: \u2018Merriweather';\n src: url( \u201cfonts\/Merriweather.ttf\u201d) format(\u2018woff\u2019); \/* medium *\/\n font-weight: normal;\n font-style: normal;\n}<\/code><\/pre>\n<p>F\u00fcge noch mehr hinzu, was du brauchst. Beachte, dass du, wenn du die Varianten Fett, Kursiv, etc. deiner Schrift verwenden m\u00f6chtest, jede einzelne mit <code>@fontface<\/code> deklarieren und dann <a href=\"https:\/\/css-tricks.com\/whats-deal-declaring-font-properties-font-face\/\" target=\"_blank\" rel=\"noopener noreferrer\">die Gewichtung oder den Stil f\u00fcr jede einzelne angeben musst<\/a>, wie ich es oben mit Raleway f\u00fcr Fett- und Normaltexte getan habe.<\/p>\n<p>F\u00fcge nun das Styling f\u00fcr deine Elemente hinzu, wie du es bei der Verwendung von Webfonts tun w\u00fcrdest:<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', Helvetica, sans-serif;\n src: url( \u201c\/fonts\/Raleway-Medium.ttf\u201d );\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', Georgia, serif;\n}<\/code><\/pre>\n<p>Deine lokal gehosteten Fonts funktionieren nun mit deinem Theme.<\/p>\n<h2 id=\"change\">Wie man Fonts in WordPress \u00e4ndert<\/h2>\n<p>Jetzt wei\u00dft du, wie du Fonts auf zwei Arten in deiner WordPress-Seite installieren kannst. Wie w\u00e4re es mit der Bearbeitung? Wie w\u00e4re es mit einer \u00c4nderung?<\/p>\n<p>Du kannst deine Schriften auf eine von drei Arten bearbeiten: \u00fcber den Customizer, im Post- oder Seitenbearbeitungsbildschirm oder mit CSS.<\/p>\n<p>Betrachten wir jede dieser Optionen zum \u00c4ndern von Schriftstil, Farbe und Gr\u00f6\u00dfe.<\/p>\n<h3>Wie man Schriftarten in WordPress \u00e4ndert<\/h3>\n<p>Lasst uns sehen, wie wir das beide tun k\u00f6nnen, wenn ihr den Blockeditor oder den klassischen Editor benutzt.<\/p>\n<h4>Schriftarten im Blockeditor \u00e4ndern (Gutenberg)<\/h4>\n<p>Wenn du eine aktuelle Version von WordPress mit dem <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-wordpress-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg-Editor<\/a> verwendest, kannst du den Stil deines Textes \u00e4ndern, wenn du ihn in deinem Beitrag oder deiner Seite bearbeitest.<\/p>\n<p>W\u00e4hle den Block aus, den du bearbeiten m\u00f6chtest, und dar\u00fcber erscheint ein Styling-Men\u00fc.<\/p>\n<figure id=\"attachment_56120\" aria-describedby=\"caption-attachment-56120\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56120 size-full\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/gutenberg-block-styling.jpg\" alt=\"Gutenberg Block Styling\" width=\"1500\" height=\"567\"><figcaption id=\"caption-attachment-56120\" class=\"wp-caption-text\">Gutenberg Block Styling<\/figcaption><\/figure>\n<p>W\u00e4hle den Text, den du bearbeiten m\u00f6chtest, und klicke dann auf die Symbole, um ihn fett oder kursiv darzustellen. Wenn du auf den Pfeil neben diesen klickst, siehst du, dass du auch Durchstreichen ausw\u00e4hlen kannst.<\/p>\n<figure id=\"attachment_56500\" aria-describedby=\"caption-attachment-56500\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56500 size-full\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/durchstreichen -in-Gutenberg1.jpg\" alt=\"Durchstreichen in Gutenberg\" width=\"1500\" height=\"639\"><figcaption id=\"caption-attachment-56500\" class=\"wp-caption-text\">Durchstreichen in Gutenberg<\/figcaption><\/figure>\n<h4>\u00c4ndern von Font-Stilen im Classic Editor<\/h4>\n<p>Wenn du eine \u00e4ltere Version von WordPress verwendest oder das <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/classic-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Classic Editor<\/a> Plugin installiert hast, kannst du auch Schriftarten bearbeiten. (Wenn du den Gutenberg-Editor nicht willst, ist es besser, <a href=\"https:\/\/kinqsta.com\/de\/docs\/support\/umfang-des-supports\/managed-wordpress-support-umfang\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress zu aktualisieren<\/a> und <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-wordpress-editor-deaktivieren\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg zu deaktivieren<\/a>.)<\/p>\n<p>Der Classic Editor enth\u00e4lt eine Symbolleiste \u00fcber dem Hauptbearbeitungsfenster, in der du die Stile deines Textes \u00e4ndern kannst. Wenn du auf das Symbol zum Umschalten der Symbolleiste rechts klickst, kannst du auf weitere Optionen zugreifen, einschlie\u00dflich Durchstreichen.<\/p>\n<figure id=\"attachment_56501\" aria-describedby=\"caption-attachment-56501\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56501 size-full\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/classic-editor-toolbar.jpg\" alt=\"Classic Editor Styling Toolbar\" width=\"1500\" height=\"727\"><figcaption id=\"caption-attachment-56501\" class=\"wp-caption-text\">Classic Editor Styling Toolbar<\/figcaption><\/figure>\n<h4>\u00c4ndern von Schriftarten im Customizer<\/h4>\n<p>Wenn du den Schriftstil f\u00fcr ein bestimmtes Element \u00e4ndern m\u00f6chtest, kannst du dies tun, indem du manuelles CSS zum Customizer hinzuf\u00fcgst.<\/p>\n<p>\u00d6ffne den Customizer und klicke auf <strong>Additional CSS<\/strong>. Dadurch wird ein Bildschirm ge\u00f6ffnet, in dem du CSS eingeben kannst.<\/p>\n<figure id=\"attachment_56502\" aria-describedby=\"caption-attachment-56502\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56502 size-full\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/additional-css-im-customizer.jpg\" alt=\"Additional CSS im Customizer\" width=\"1500\" height=\"879\"><figcaption id=\"caption-attachment-56502\" class=\"wp-caption-text\">Additional CSS im Customizer<\/figcaption><\/figure>\n<p>Jetzt kannst du das CSS f\u00fcr deine Fonts in das Feld eingeben. Wenn du also alle h1- und h2-Elemente in Kursivschrift \u00e4ndern m\u00f6chtest, w\u00fcrdest du dieses CSS hinzuf\u00fcgen:<\/p>\n<pre><code class=\"language-css\">h1, h2 {\n font-style: italics;\n}<\/code><\/pre>\n<h4>\u00c4ndern von Font-Stilen in dem Stylesheet<\/h4>\n<p>Wenn es dir leicht f\u00e4llt, Code zu deinem Stylesheet hinzuzuf\u00fcgen, ist dies ein besserer Weg, dies zu tun.<\/p>\n<p>Wenn du ein Theme eines Drittanbieters verwendest, <a href=\"https:\/\/kinqsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\" target=\"_blank\" rel=\"noopener noreferrer\">erstelle ein Child-Theme<\/a> f\u00fcr dein eigenes Styling, da sonst alle \u00c4nderungen, die du machst, beim Aktualisieren des Themes verloren gehen. Du musst ein Stylesheet im Child-Theme erstellen, um WordPress mitzuteilen, dass es sich um ein Child-Theme handelt: Dort legst du dein neues Font-Design an.<\/p>\n<p>Wenn du dein eigenes Theme benutzt, kannst du das CSS in deinem eigenen Stylesheet bearbeiten und \u00e4ndern. Die Datei ist <strong>style.css<\/strong> und du findest sie in deinem Themeordner unter <strong>wp-content\/themes<\/strong>.<\/p>\n<p>F\u00fcge am Ende deines Stylesheets eine beliebige Schriftart hinzu, damit sie nicht durch etwas bereits Vorhandenes aufgehoben wird. Oder noch besser, entfernen und \u00fcberschreibe alle vorhandenen Schriftarten, es sei denn, du m\u00f6chtest sie behalten.<\/p>\n<p>\u00c4ndere die St\u00e4rke eines Elements mit Schriftart:<\/p>\n<pre><code class=\"language-css\">span.featured {\n font-weight = bold;\n}<\/code><\/pre>\n<p>\u00c4ndere den Stil eines Elements mit font-style:<\/p>\n<pre><code class=\"language-css\">span.featured {\n font-style = italic;\n}<\/code><\/pre>\n<p>\u00c4ndere die Ausrichtung mit der Textausrichtung:<\/p>\n<pre><code class=\"language-css\">span.featured {\n text-alignment: center;\n}<\/code><\/pre>\n<h3>Wie man Schriftfarben in WordPress \u00e4ndert<\/h3>\n<p>Eine weitere \u00c4nderung, die du vornehmen kannst, ist die \u00c4nderung der Farbe eines bestimmten Textes auf deiner Webseite. H\u00fcte dich davor, damit zu \u00fcbertreiben: Dein Theme wurde mit Farben entworfen, die gut zusammenpassen, und wenn du zu viele Farben hinzuf\u00fcgst, k\u00f6nnte es grell und unprofessionell aussehen.<\/p>\n<h4>Schriftfarben in Gutenberg \u00e4ndern<\/h4>\n<p>Mit den Gutenberg-Textbl\u00f6cken kannst du Textfarbe und Hintergrund bearbeiten. \u00d6ffne dazu den zu \u00e4ndernden Block und klicke auf die Registerkarte <strong>Farbeinstellungen<\/strong> im Abschnitt <strong>Block<\/strong> rechts auf dem Bildschirm.<\/p>\n<figure id=\"attachment_56124\" aria-describedby=\"caption-attachment-56124\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56124 size-full\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/die-registerkarte-farbeinstellungen.jpg\" alt=\"Die Registerkarte Farbeinstellungen\" width=\"1500\" height=\"667\"><figcaption id=\"caption-attachment-56124\" class=\"wp-caption-text\">Die Registerkarte Farbeinstellungen<\/figcaption><\/figure>\n<p>Von hier aus kannst du die Hintergrundfarbe und die Textfarbe f\u00fcr Textbl\u00f6cke bearbeiten.<\/p>\n<figure id=\"attachment_56641\" aria-describedby=\"caption-attachment-56641\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56641 size-full\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/benutzerdefinierte-farben-in-einem-block.jpg\" alt=\"Benutzerdefinierte Farben in einem Block\" width=\"1500\" height=\"756\"><figcaption id=\"caption-attachment-56641\" class=\"wp-caption-text\">Benutzerdefinierte Farben in einem Block<\/figcaption><\/figure>\n<p>Beachte, dass WordPress dich warnen wird, wenn die Kombination der Farben, die du verwendest, schlecht f\u00fcr die Barrierefreiheit ist, wie in dem Beispiel, das ich oben verwendet habe. Vermeide die Versuchung, mit deinen Farben \u00fcber Bord zu gehen &#8211; schlie\u00dflich hast du dein Theme gew\u00e4hlt, weil sein Farbdesign f\u00fcr deine Seite geeignet war, und das Hinzuf\u00fcgen von viel mehr Farben k\u00f6nnte es grell aussehen lassen.<\/p>\n<p>Wenn du auf die Registerkarte <strong>Erweitert<\/strong> unterhalb der Registerkarte <strong>Farbeinstellungen<\/strong> klickst, kannst du diesem Block auch eine Klasse hinzuf\u00fcgen, die du dann im Customizer oder deinem Stylesheet gestalten kannst. Wenn du zum Beispiel eine Klasse von <code>.featured<\/code> zu deinem Block hinzugef\u00fcgt hast, kannst du sie dann mit dieser Klasse gestalten.<\/p>\n<h4>\u00c4ndern von Schriftfarben im klassischen Editor<\/h4>\n<p>In der Symbolleiste des klassischen Editors kannst du die Farbe des ausgew\u00e4hlten Textes \u00e4ndern. So kannst du ein einzelnes Wort ausw\u00e4hlen und seine Farbe \u00e4ndern. Unten habe ich einen Satz rot gemacht.<\/p>\n<figure id=\"attachment_56642\" aria-describedby=\"caption-attachment-56642\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56642 size-full\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/farbanderung-im-klassischen-editor.jpg\" alt=\"Farb\u00e4nderung im klassischen Editor\" width=\"1500\" height=\"716\"><figcaption id=\"caption-attachment-56642\" class=\"wp-caption-text\">Farb\u00e4nderung im klassischen Editor<\/figcaption><\/figure>\n<p>Obwohl dies theoretisch viel Flexibilit\u00e4t bietet, solltest du dich davor h\u00fcten, es \u00fcberm\u00e4\u00dfig zu benutzen. Wenn du anf\u00e4ngst, deinem Text viel mehr Farben hinzuzuf\u00fcgen, k\u00f6nnte das zu einer Webseite f\u00fchren, die schwer zu lesen und schlecht zug\u00e4nglich ist.<\/p>\n<h4>\u00c4ndern der Schriftfarben im Customizer<\/h4>\n<p>Wenn dein Theme Optionen enth\u00e4lt, um das <a href=\"https:\/\/kinqsta.com\/de\/blog\/webseiten-farbschemata\/\">Farbschema der Webseite<\/a> zu \u00e4ndern, ist dies der beste Ort, um dies zu tun.<\/p>\n<p>Zum Beispiel verwende ich auf der untenstehenden Webseite ein Theme, mit dem ich ein neues Farbschema f\u00fcr das gesamte Theme ausw\u00e4hlen kann. Dies tr\u00e4gt dazu bei, dass die neuen Farben gut zusammenarbeiten und koh\u00e4rent sind.<\/p>\n<figure id=\"attachment_56643\" aria-describedby=\"caption-attachment-56643\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56643 size-full\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/bearbeiten-des-farbschemas-im-customizer.jpg\" alt=\"Bearbeiten des Farbschemas im Customizer\" width=\"1500\" height=\"815\"><figcaption id=\"caption-attachment-56643\" class=\"wp-caption-text\">Bearbeiten des Farbschemas im Customizer<\/figcaption><\/figure>\n<p>Die Optionen daf\u00fcr variieren je nach Theme &#8211; einige Themes erm\u00f6glichen es dir, \u00dcberschriften, Links und andere Elemente auszuw\u00e4hlen und ihre Farbe zu \u00e4ndern.<\/p>\n<p>Wenn du bestimmte Elemente angreifen m\u00f6chtest, um ihre Farbe zu \u00e4ndern, dies aber keine Option f\u00fcr dein Design ist, kannst du CSS im Customizer hinzuf\u00fcgen.<\/p>\n<p>W\u00e4hle <strong>Customize &gt; Additional CSS<\/strong> und gib dein CSS in das Textfeld ein.<\/p>\n<p>Wenn du beispielsweise die Farbe deiner <code>h1<\/code>-Headings \u00e4ndern m\u00f6chtest, gibst du diese ein:<\/p>\n<pre><code class=\"language-css\">h1 {\n color: #564534;\n}<\/code><\/pre>\n<p>Wenn das nicht funktioniert, musst du m\u00f6glicherweise spezifischere CSS hinzuf\u00fcgen. In meinem Theme ist die Farbe f\u00fcr den Link zur Seiten\u00fcberschrift mit der <code>#site-title<\/code> ID programmiert, daher muss ich dieses CSS hinzuf\u00fcgen:<\/p>\n<pre><code class=\"language-css\">#site-title a {\n color: #564534;\n}<\/code><\/pre>\n<figure id=\"attachment_56128\" aria-describedby=\"caption-attachment-56128\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56128 size-full\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/additional-css-farbe.jpg\" alt=\"Additional CSS - Farbe\" width=\"1500\" height=\"818\"><figcaption id=\"caption-attachment-56128\" class=\"wp-caption-text\">Zus\u00e4tzliches CSS &#8211; Farbe<\/figcaption><\/figure>\n<p>Ersetze die Farbe, die ich oben verwendet habe, durch deine eigene Farbe.<\/p>\n<p>Wenn du mit deinen \u00c4nderungen zufrieden bist, klicke auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong>.<\/p>\n<h4>\u00c4ndern von Schriftfarben in deinem Stylesheet<\/h4>\n<p>Wie bei den Schriftarten kannst du auch das Stylesheet deines Themes bearbeiten (oder ein Child-Theme erstellen), um die Schriftfarben zu \u00e4ndern.<\/p>\n<p>\u00c4ndere die Farbe mit Farbe. Unten \u00e4ndere ich die Hauptfarbe f\u00fcr den Text meiner Webseite, indem ich das <code>body<\/code>-Element verwende:<\/p>\n<pre><code class=\"language-css\">body {\n color = #222222;\n}<\/code><\/pre>\n<p>Stelle sicher, dass du jedes vorhandene Styling f\u00fcr die selben Elemente \u00fcberschreibst und dass du auch alle Elemente, die dieses Styling erben, stilisierst, wenn du m\u00f6chtest, dass sie eine andere Farbe haben. Der gesamte Text erbt die Farbe des<strong> Body<\/strong>-Elements, es sei denn, er hat sein eigenes Styling.<\/p>\n<h3>\u00c4ndern der Schriftgr\u00f6\u00dfe in WordPress<\/h3>\n<p>Aus Gr\u00fcnden der Barrierefreiheit kannst du entscheiden, dass deine Schriften gr\u00f6\u00dfer sein sollen, als sie standardm\u00e4\u00dfig in deinem Theme sind. Oder du k\u00f6nntest entscheiden, dass die \u00dcberschriften in deinen Widget-Bereichen zum Beispiel zu klein sind.<\/p>\n<h4>Schriftgr\u00f6\u00dfe in Gutenberg \u00e4ndern<\/h4>\n<p>Mit dem Gutenberg-Editor kannst du die Gr\u00f6\u00dfe des Textes innerhalb jedes Blocks \u00e4ndern.<\/p>\n<p>W\u00e4hle den Block aus und klicke dann auf die Registerkarte Texteinstellungen im Men\u00fc Bl\u00f6cke auf der rechten Seite des Bildschirms. Du kannst den Text im Block kleiner oder gr\u00f6\u00dfer machen, wie unten gezeigt.<\/p>\n<figure id=\"attachment_56129\" aria-describedby=\"caption-attachment-56129\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56129 size-full\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/fontgrosse-im-gutenberg-andern.jpg\" alt=\"Font Gr\u00f6\u00dfe im Gutenberg Editor \u00e4ndern\" width=\"1500\" height=\"672\"><figcaption id=\"caption-attachment-56129\" class=\"wp-caption-text\">Font Gr\u00f6\u00dfe im Gutenberg Editor \u00e4ndern<\/figcaption><\/figure>\n<p>Achte darauf, dies nicht zu sehr zu tun: Wenn alle Abs\u00e4tze auf deiner Seite unterschiedliche Gr\u00f6\u00dfen haben, wird es unzusammenh\u00e4ngend aussehen und schwer zu lesen sein.<\/p>\n<h4>\u00c4ndern der Schriftgr\u00f6\u00dfe im klassischen Editor<\/h4>\n<p>Der klassische Editor bietet dir nicht die M\u00f6glichkeit, einen bestimmten Text auszuw\u00e4hlen und seine Gr\u00f6\u00dfe zu \u00e4ndern: Wenn du also diese Funktion ben\u00f6tigst, musst du auf Gutenberg aktualisieren. Entschuldigung!<\/p>\n<h4>\u00c4ndern der Schriftgr\u00f6\u00dfe im Customizer<\/h4>\n<p>Abh\u00e4ngig von deinem Theme hast du die M\u00f6glichkeit, die Schriftgr\u00f6\u00dfen im Customizer zu \u00e4ndern, entweder die Schriftgr\u00f6\u00dfe f\u00fcr die gesamte Webseite zu \u00e4ndern oder Kopfzeilen und Text zu verwenden.<\/p>\n<p>Wenn dein Theme keine Customizer-Option zum \u00c4ndern der Schriftgr\u00f6\u00dfe enth\u00e4lt, du aber die Option <strong>Additional CSS<\/strong> verwenden kannst. Gehe zu <strong>Customize &gt; Additional CSS<\/strong> und gib das CSS in das Feld ein.<\/p>\n<p>Unten mache ich die \u00dcberschriften in den Widget-Bereichen gr\u00f6\u00dfer, mit diesem CSS:<\/p>\n<pre><code class=\"language-css\">h2.widget-title {\n\u00a0font-size: 3em;\n}<\/code><\/pre>\n<figure id=\"attachment_56130\" aria-describedby=\"caption-attachment-56130\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56130 size-full\" src=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/styling-schriftgosse-mit-zusatzlichem-css.jpg\" alt=\"Styling der Schriftgr\u00f6\u00dfe mit zus\u00e4tzlichem CSS\" width=\"1500\" height=\"816\"><figcaption id=\"caption-attachment-56130\" class=\"wp-caption-text\">Styling der Schriftgr\u00f6\u00dfe mit zus\u00e4tzlichem CSS<\/figcaption><\/figure>\n<p>Vielleicht ist das ein bisschen zu gro\u00df, aber es gibt dir die allgemeine Vorstellung.<\/p>\n<h4>\u00c4ndern der Schriftgr\u00f6\u00dfe in dem Stylesheet<\/h4>\n<p>Das \u00c4ndern der Gr\u00f6\u00dfe von Fonts in deinem Stylesheet funktioniert \u00e4hnlich wie das \u00c4ndern eines anderen Stylings f\u00fcr deine Fonts.<\/p>\n<p>Wenn du die Gr\u00f6\u00dfe des gesamten Textes auf deiner Webseite \u00e4ndern m\u00f6chtest, w\u00fcrdest du das <code>body<\/code>-Element verwenden:<\/p>\n<pre><code class=\"language-css\">body {\n font-size: 14px;\n}<\/code><\/pre>\n<p>F\u00fcr das <code>body<\/code>-Element verwendest du Pixel, aber f\u00fcr andere Elemente verwendest du emso ist die Gr\u00f6\u00dfe relativ zur Gr\u00f6\u00dfe des <code>body<\/code>-Elements.<\/p>\n<pre><code class=\"language-css\">h1,\n#site-title {\n font-size: 2em;\n}<\/code><\/pre>\n<p>Denk daran, wenn du \u00c4nderungen an den Schriften in deinem Stylesheet f\u00fcr das Theme vornehmen m\u00f6chtest, teste es zuerst auf einer Entwicklungs- oder <a href=\"https:\/\/kinqsta.com\/de\/docs\/wordpress-hosting\/staging-umgebung\/\" target=\"_blank\" rel=\"noopener noreferrer\">Staging-Seite<\/a>, damit du nicht das Risiko eingehst, deine Live-Seite zu ruinieren.<\/p>\n<h2 id=\"optimize\">Wie man Schriften in WordPress optimiert<\/h2>\n<p>Unabh\u00e4ngig davon, ob du Webfonts oder lokal gehostete Fonts verwendest, ist es sinnvoll, alles zu tun, was du kannst, um deine Fonts zu optimieren.<\/p>\n<p>Hier gebe ich dir einige Tipps zur Optimierung deiner Schriften, sowohl f\u00fcr die Geschwindigkeit als auch f\u00fcr das Theme.<\/p>\n<h3>Optimierung von Fonts f\u00fcr die Leistung<\/h3>\n<p>Wenn du Webfonts auf deiner Webseite verwendest, solltest du alles tun, was sie k\u00f6nnen, um sicherzustellen, dass sie so schnell wie m\u00f6glich auf deinen Seiten bereitgestellt werden und dass die Tatsache, dass sie anderswo gehostet werden, die Dinge nicht verlangsamt.<\/p>\n<ul>\n<li>Verwende das Caching, um sicherzustellen, dass die Seiten nicht bei jedem Laden neu erstellt werden m\u00fcssen. Kinsta Hosting-Angebote kommen <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\">mit eingebautem Caching.<\/a><\/li>\n<li>Verwende einen Webfonts-Anbieter, der Schriften \u00fcber ein <a href=\"https:\/\/kinqsta.com\/de\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#kinstas-cdn\" target=\"_blank\" rel=\"noopener noreferrer\">Content Delivery Network<\/a> oder CDN bereitstellt. Google Fonts tut dies und beschleunigt die Bereitstellung der Schriften.<\/li>\n<li>Verwende nur die Schriften, die du brauchst. In der Warteschlange d\u00fcrfen keine Variationen von Schriften (Gewichte, Stile) stehen, die du nicht in deinem Stylesheet verwenden wirst. Wenn du sie zu einem sp\u00e4teren Zeitpunkt brauchst, kannst du sie jederzeit hinzuf\u00fcgen.<\/li>\n<li>Wenn du Webfonts verwendest, stelle sicher, dass du sie richtig einordnest. Verwende keine @import-Zeile in deinem Stylesheet, auch wenn es das ist, was dein Webfont-Provider dir sagt.<\/li>\n<li>Wenn du CSS manuell hinzuf\u00fcgst, f\u00fcge es zum Stylesheet deines Themes hinzu und nicht zum &lt;head&gt; Abschnitt deiner header.php-Datei. Dies ist ein Grund, warum es besser ist, das CSS manuell in dein Theme zu programmieren, als den Customizer oder einen Block zu verwenden, da beide das Inline-CSS zur Seite hinzuf\u00fcgen, anstatt es zum Stylesheet hinzuzuf\u00fcgen.<\/li>\n<li>Erw\u00e4ge die Verwendung von CSS-Inlining, um die Ladezeiten der Seiten um einige Millisekunden zu verk\u00fcrzen. Dies ist ein Prozess, der die base64-Kodierung verwendet, um CSS aus deinem Stylesheet vor dem Laden in die Seite einzuf\u00fcgen, so dass der Browser keine zus\u00e4tzlichen Dateien laden muss. Es mag kontraintuitiv erscheinen, wenn man den obigen Ratschlag \u00fcber das Schreiben von Inline-CSS nicht befolgt, aber es funktioniert immer noch aus einer separaten CSS-Datei und bedeutet nicht, dass man Inline-CSS manuell programmieren muss. Wenn du mehrere Schriften l\u00e4dst, kann das Inlining <a href=\"https:\/\/www.bramstein.com\/writing\/web-font-anti-patterns-inlining.html\" target=\"_blank\" rel=\"noopener noreferrer\">deine Webseite ein wenig beschleunigen<\/a>.<\/li>\n<li>Verwende die <a href=\"https:\/\/kinqsta.com\/de\/blog\/externes-css-kombiniert\/#combine-external-css-in-wordpress\" target=\"_blank\" rel=\"noopener noreferrer\">Minification<\/a>, um die Gr\u00f6\u00dfe deines Stylesheets zu reduzieren. Als <a href=\"https:\/\/kinqsta.com\/de\/preise\/?plan=visits-business1\">Kinsta-Kunde<\/a> kannst du das ganz einfach tun, indem du die <a href=\"https:\/\/kinqsta.com\/de\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#code-minification-1\">Funktion zur Code-Minifizierung<\/a> direkt im <a href=\"https:\/\/kinqsta.com\/de\/mykinsta\/\">MyKinsta-Dashboard<\/a> nutzt. Damit k\u00f6nnen Kunden mit einem einfachen Klick die automatische CSS- und JavaScript-Minifizierung aktivieren und so ihre Seiten ohne manuellen Aufwand beschleunigen.<\/li>\n<li>Wenn du Schriften lokal hosten m\u00f6chtest, lade nur die Dateien f\u00fcr die Schriften und die von dir ben\u00f6tigten Schriftengewichte und -stile hoch. F\u00fcge nur die Varianten hinzu, die du brauchst, indem du die @font-face-Deklaration verwendest.<\/li>\n<li>Erw\u00e4ge, ein CDN zu verwenden, um deine eigenen Fonts zu hosten, anstatt sie auf deinem eigenen Server zu hosten.<\/li>\n<li>Wenn du deine eigenen Fonts hosten m\u00f6chtest, f\u00fcge zus\u00e4tzliche Formate hinzu: woff2, woff, ttf und eot. Browser k\u00f6nnen dann die Version ausw\u00e4hlen, die am schnellsten geladen wird.<\/li>\n<li>Wenn du eine andere Schriftart f\u00fcr deinen Seitentitel verwendest, schalte nur die Zeichen ein, die du brauchst, anstatt die gesamte Schriftbibliothek.<\/li>\n<\/ul>\n<p>Wenn dein Seitentitel also Kinsta ist, k\u00f6nntest du eine kleine Leistungssteigerung erzielen, indem du das Stylesheet wie dieses anschlie\u00dft:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_title_font() {\n wp_register_style( 'googleFonts', \u2018https:\/\/fonts.googleapis.com\/css?family=Raleway&text=\u201ckinsta');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );<\/code><\/pre>\n<h3>Optimierung von Schriften f\u00fcr das Design<\/h3>\n<p>Neben der Optimierung der Leistung deiner Fonts ist es auch sinnvoll, daf\u00fcr zu sorgen, dass sie optisch optimiert sind: dass sie gut zum Design deiner Webseite und zu deinen Offline-Materialien passen.<\/p>\n<p>Dies ist insbesondere dann der Fall, wenn du ein Plugin oder ein Child-Theme verwendest, um zus\u00e4tzliche Schriften zu den bereits mit deinem Theme mitgelieferten hinzuzuf\u00fcgen. Es besteht die Gefahr, dass dein Design chaotisch aussieht, wenn es zu viele Schriften in zu vielen Farben und Stilen gibt.<\/p>\n<p>Bevor du zus\u00e4tzliche Schriften zu deiner Webseite hinzuf\u00fcgst, solltest du Folgendes beachten:<\/p>\n<ul>\n<li>Sind die neuen Schriften konsistent mit deinen bestehenden Schriften? Vermitteln sie einen \u00e4hnlichen Stil oder eine \u00e4hnliche Stimmung?<\/li>\n<li>Wenn du eine Schriftart zuordnen musst, die f\u00fcr Druckmaterialien verwendet wurde, aber nicht die gleiche Schriftart wie eine Webschrift verwenden kann, versuche, eine m\u00f6glichst genaue \u00dcbereinstimmung in Google-Schriften zu finden.<\/li>\n<li>Sind die von dir gew\u00e4hlten Schriften mit deiner Marke vereinbar? Wenn du ein ernsthaftes Unternehmen f\u00fchrst, solltest du Comic Sans nicht verwenden (tats\u00e4chlich, egal welche Art von Webseite du betreibst, du sollst Comic Sans nicht verwenden).<\/li>\n<li>Wenn du die Farben deiner Schriften \u00e4nderst, versuche, Farben zu verwenden, die bereits im Design deines Themes enthalten sind oder die mit ihnen \u00fcbereinstimmen. Das Hinzuf\u00fcgen von zu vielen Farben wird deine Seite grell und unprofessionell aussehen lassen.<\/li>\n<li>Wenn du versuchst, ein Schriftpaar in Google Fonts auszuw\u00e4hlen, versuche, einen Dienst wie <a href=\"https:\/\/fontpair.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">fontpair<\/a> zu verwenden, um zwei zu finden, die gut zusammenpassen.<\/li>\n<\/ul>\n<p>Die Schriften, die du in deinem Theme verwendest, haben einen Einfluss auf den Eindruck, den Besucher bekommen, wenn sie deine Webseite erreichen. Stelle sicher, dass du dies ber\u00fccksichtigt und Schriften ausgew\u00e4hlt hast, die deine Marke st\u00e4rken.<\/p>\n<h3><strong>Arbeiten mit variablen Schriften<\/strong><\/h3>\n<p><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/typography\/variable-fonts\/\" target=\"_blank\" rel=\"noopener noreferrer\">Variable Fonts<\/a> sind eine neue Art von Fonts, die das Hinzuf\u00fcgen von mehr Fonts zu deiner Webseite effizienter machen.<\/p>\n<p>Sie erm\u00f6glichen es, mehr Informationen in einer Schriftdatei zu speichern, so dass du, wenn du Variationen deiner Schriftart m\u00f6chtest (fett, kursiv, etc.), nicht mehrere Schriftdateien laden musst, sondern nur die eine.<\/p>\n<p>Bei einer Schrift mit mehreren Schriftarten, -stilen und -schr\u00e4gen kann dies viel Speicherplatz sparen und das Einrichten der Schriftart oder das Hinzuf\u00fcgen \u00fcber @fontface erleichtern.<\/p>\n<p>Variable Schriften werden in den neuesten Versionen von Chrome, Edge, Firefox und Safari unterst\u00fctzt, aber nicht von \u00e4lteren Browsern; wenn du sie also verwendest, brauchst du einen Fallback. Und es gibt noch nicht viele variable Schriften. Google-Schriften enthalten keine, aber Google unterst\u00fctzt die Spezifikation, so dass es wahrscheinlich ist, dass sie mit der Zeit hinzugef\u00fcgt werden.<\/p>\n<p>Schriftenentwickler arbeiten daran, mehr variable Schriften <a href=\"https:\/\/www.monotype.com\/resources\/articles\/variable-fonts-making-the-promise-a-reality\/\" target=\"_blank\" rel=\"noopener noreferrer\">zu erstellen und ihre Zuverl\u00e4ssigkeit zu verbessern<\/a>, so dass es sich lohnt, den Fortschritt zu beobachten, damit du variable Schriften verwenden kannst, um deine Schriften zu optimieren, sobald sie stabiler werden.<\/p>\n\n<h2><strong>Zusammenfassung<\/strong><\/h2>\n<p>Das \u00c4ndern von Fonts auf deiner WordPress-Seite ist keine einfache Aufgabe. Du hast verschiedene M\u00f6glichkeiten zur Auswahl:<\/p>\n<ol>\n<li>Verwendung von Webfonts durch Installation eines Plugins.<\/li>\n<li>Verwende Webfonts, indem du sie in dein Theme programmierst und in eine Reihe stellst.<\/li>\n<li>Hosting deiner Schriften.<\/li>\n<\/ol>\n<p>Dann solltest du dich darauf konzentrieren, wie du deine Schriften f\u00fcr eine bessere Leistung optimieren kannst. Wenn du den Tipps in diesem Handbuch folgst, solltest du nicht nur Fonts in WordPress \u00e4ndern k\u00f6nnen, sondern auch mehr Kontrolle \u00fcber sie in deinem Theme haben.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fonts k\u00f6nnen den Unterschied zwischen einer langweiligen und einer sch\u00f6nen Webseite ausmachen. Indem du lernst, wie man die Schriftart in WordPress \u00e4ndert, kannst du deine Webseite &#8230;<\/p>\n","protected":false},"author":105,"featured_media":29409,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[223,124],"topic":[1012,1001],"class_list":["post-29389","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-fonts","tag-webseite","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>Wie man Fonts in WordPress \u00e4ndert (und Gr\u00f6\u00dfe, Farbe \u00e4ndert und Optimiert)<\/title>\n<meta name=\"description\" content=\"Erfahre alles, was du brauchst, um Fonts in WordPress zu \u00e4ndern, wie du Schriftgr\u00f6\u00dfe und -farben \u00e4ndern kannst und wie du sie f\u00fcr schnellere Seiten optimieren kannst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man Fonts in WordPress \u00e4ndert (und die Gr\u00f6\u00dfe, Farbe \u00e4ndert und sie Optimiert)\" \/>\n<meta property=\"og:description\" content=\"Erfahre alles, was du brauchst, um Fonts in WordPress zu \u00e4ndern, wie du Schriftgr\u00f6\u00dfe und -farben \u00e4ndern kannst und wie du sie f\u00fcr schnellere Seiten optimieren kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/\" \/>\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:published_time\" content=\"2019-11-06T08:59:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T15:40:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/fonts-in-wordpress-andern.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rachel McCollin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Erfahre alles, was du brauchst, um Fonts in WordPress zu \u00e4ndern, wie du Schriftgr\u00f6\u00dfe und -farben \u00e4ndern kannst und wie du sie f\u00fcr schnellere Seiten optimieren kannst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/fonts-in-wordpress-andern.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rachel McCollin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"30\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/\"},\"author\":{\"name\":\"Rachel McCollin\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\"},\"headline\":\"Wie man Fonts in WordPress \u00e4ndert (und die Gr\u00f6\u00dfe, Farbe \u00e4ndert und sie Optimiert)\",\"datePublished\":\"2019-11-06T08:59:53+00:00\",\"dateModified\":\"2025-09-01T15:40:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/\"},\"wordCount\":6157,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/fonts-in-wordpress-andern.jpg\",\"keywords\":[\"fonts\",\"webseite\"],\"articleSection\":[\"Die besten WordPress Tutorials\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/\",\"url\":\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/\",\"name\":\"Wie man Fonts in WordPress \u00e4ndert (und Gr\u00f6\u00dfe, Farbe \u00e4ndert und Optimiert)\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/fonts-in-wordpress-andern.jpg\",\"datePublished\":\"2019-11-06T08:59:53+00:00\",\"dateModified\":\"2025-09-01T15:40:28+00:00\",\"description\":\"Erfahre alles, was du brauchst, um Fonts in WordPress zu \u00e4ndern, wie du Schriftgr\u00f6\u00dfe und -farben \u00e4ndern kannst und wie du sie f\u00fcr schnellere Seiten optimieren kannst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/fonts-in-wordpress-andern.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/fonts-in-wordpress-andern.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Fonts in WordPress \u00e4ndern\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress-Schriftarten\",\"item\":\"https:\/\/kinqsta.com\/de\/thema\/wordpress-schriftarten\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man Fonts in WordPress \u00e4ndert (und die Gr\u00f6\u00dfe, Farbe \u00e4ndert und sie Optimiert)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/de\/#website\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/de\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\",\"name\":\"Rachel McCollin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"caption\":\"Rachel McCollin\"},\"description\":\"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.\",\"url\":\"https:\/\/kinqsta.com\/de\/blog\/author\/rachelmccollin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man Fonts in WordPress \u00e4ndert (und Gr\u00f6\u00dfe, Farbe \u00e4ndert und Optimiert)","description":"Erfahre alles, was du brauchst, um Fonts in WordPress zu \u00e4ndern, wie du Schriftgr\u00f6\u00dfe und -farben \u00e4ndern kannst und wie du sie f\u00fcr schnellere Seiten optimieren kannst.","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:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man Fonts in WordPress \u00e4ndert (und die Gr\u00f6\u00dfe, Farbe \u00e4ndert und sie Optimiert)","og_description":"Erfahre alles, was du brauchst, um Fonts in WordPress zu \u00e4ndern, wie du Schriftgr\u00f6\u00dfe und -farben \u00e4ndern kannst und wie du sie f\u00fcr schnellere Seiten optimieren kannst.","og_url":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2019-11-06T08:59:53+00:00","article_modified_time":"2025-09-01T15:40:28+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/fonts-in-wordpress-andern.jpg","type":"image\/jpeg"}],"author":"Rachel McCollin","twitter_card":"summary_large_image","twitter_description":"Erfahre alles, was du brauchst, um Fonts in WordPress zu \u00e4ndern, wie du Schriftgr\u00f6\u00dfe und -farben \u00e4ndern kannst und wie du sie f\u00fcr schnellere Seiten optimieren kannst.","twitter_image":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/fonts-in-wordpress-andern.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Rachel McCollin","Gesch\u00e4tzte Lesezeit":"30\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/"},"author":{"name":"Rachel McCollin","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/52eb266d622b565d3206e355caac172e"},"headline":"Wie man Fonts in WordPress \u00e4ndert (und die Gr\u00f6\u00dfe, Farbe \u00e4ndert und sie Optimiert)","datePublished":"2019-11-06T08:59:53+00:00","dateModified":"2025-09-01T15:40:28+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/"},"wordCount":6157,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/fonts-in-wordpress-andern.jpg","keywords":["fonts","webseite"],"articleSection":["Die besten WordPress Tutorials"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/","url":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/","name":"Wie man Fonts in WordPress \u00e4ndert (und Gr\u00f6\u00dfe, Farbe \u00e4ndert und Optimiert)","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/fonts-in-wordpress-andern.jpg","datePublished":"2019-11-06T08:59:53+00:00","dateModified":"2025-09-01T15:40:28+00:00","description":"Erfahre alles, was du brauchst, um Fonts in WordPress zu \u00e4ndern, wie du Schriftgr\u00f6\u00dfe und -farben \u00e4ndern kannst und wie du sie f\u00fcr schnellere Seiten optimieren kannst.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#primaryimage","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/fonts-in-wordpress-andern.jpg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/fonts-in-wordpress-andern.jpg","width":1460,"height":730,"caption":"Fonts in WordPress \u00e4ndern"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress-Schriftarten","item":"https:\/\/kinqsta.com\/de\/thema\/wordpress-schriftarten\/"},{"@type":"ListItem","position":3,"name":"Wie man Fonts in WordPress \u00e4ndert (und die Gr\u00f6\u00dfe, Farbe \u00e4ndert und sie Optimiert)"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/de\/#website","url":"https:\/\/kinqsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/de\/#\/schema\/person\/52eb266d622b565d3206e355caac172e","name":"Rachel McCollin","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","caption":"Rachel McCollin"},"description":"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.","url":"https:\/\/kinqsta.com\/de\/blog\/author\/rachelmccollin\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/29389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/users\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/comments?post=29389"}],"version-history":[{"count":15,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/29389\/revisions"}],"predecessor-version":[{"id":73953,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/29389\/revisions\/73953"}],"alternate":[{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29389\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29389\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29389\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29389\/translations\/fr"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29389\/translations\/en"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29389\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29389\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29389\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29389\/translations\/se"},{"href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29389\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media\/29409"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media?parent=29389"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/tags?post=29389"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/topic?post=29389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}