{"id":74183,"date":"2025-09-25T08:16:56","date_gmt":"2025-09-25T07:16:56","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=74183&#038;preview=true&#038;preview_id=74183"},"modified":"2025-09-29T11:16:35","modified_gmt":"2025-09-29T10:16:35","slug":"variable-schriftarten","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/","title":{"rendered":"Verwendung variabler Schriftarten in WordPress-Themes"},"content":{"rendered":"<p>Seit der Einf\u00fchrung von <a href=\"https:\/\/kinsta.com\/de\/blog\/websichere-schriften\/\">Webfonts<\/a> im Jahr 2009 steht Webdesignern eine breite Palette an Schriftarten zur Verf\u00fcgung. Diese Schriften wurden gr\u00f6\u00dftenteils durch die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/\">CSS<\/a> <code>@fontface<\/code> at-Regel verwendet, die es Designern erm\u00f6glichte, sich von websicheren (System-)Schriften zu l\u00f6sen.<\/p>\n<p>Eine Vielzahl von Schriftdateiformaten wurde (und wird) von gro\u00dfen Schriftgie\u00dfereien angeboten, vor allem von <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-google-fonts\/\">Google Fonts<\/a>.<\/p>\n<p>Damals bedeutete die Verwendung von Webfonts, dass man mit separaten Dateien f\u00fcr jede Schriftst\u00e4rke und jeden Stil arbeiten musste. Dateinamen wie die folgenden machten deutlich, wie die Schriftart im Gebrauch aussehen w\u00fcrde:<\/p>\n<pre><code class=\"language-bash\">Roboto-Italic.woff2\nLato-BoldItalic.woff2\nOpenSans-SemiBold.ttf\nWorkSans-ExtraBold.ttf<\/code><\/pre>\n<p>Jede Variante musste als eigene Datei geladen werden. Das erh\u00f6hte den Seitenumfang, erforderte mehr HTTP-Anfragen und machte die Auswahl und Anwendung von Schriftarten in einem Design komplizierter.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Brauchst du eine kurze Auffrischung \u00fcber Web-Schriftarten? Schau dir unsere Anleitung an: <em><a href=\"https:\/\/kinsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/#terminology\">So \u00e4nderst du Schriftarten in WordPress (und \u00e4nderst Gr\u00f6\u00dfe, Farbe, Optimierung)<\/a><\/em><\/p>\n<\/aside>\n\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>Der Aufstieg der variablen Schriftarten<\/h2>\n<p>Im Jahr 2016 gab es einen gro\u00dfen Durchbruch in der digitalen Typografie: variable Schriftarten. Sie wurden in Zusammenarbeit von Google, Apple, Adobe und Microsoft entwickelt und haben sich schnell durchgesetzt.<\/p>\n<p>Eine variable Schriftart zeichnet sich dadurch aus, dass sie alle folgenden Elemente enthalten kann, die jeweils als Achse bezeichnet werden:<\/p>\n<table>\n<tbody>\n<tr>\n<td colspan=\"1\" rowspan=\"1\"><strong>Achse <\/strong><\/td>\n<td colspan=\"1\" rowspan=\"1\"><strong>CSS-Eigenschaft <\/strong><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">Schriftst\u00e4rke<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-weight<\/code><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">Stil<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-style: italic<\/code><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">schr\u00e4g<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-style: oblique<\/code><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">dehnen<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-stretch<\/code><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">Optische Gr\u00f6\u00dfenachse (opsz)<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-variations-setting<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Das am weitesten verbreitete Dateiformat ist <code>.woff2<\/code> (Web Open Font Format), ein stark komprimiertes Format, das 2018 zu einer <a href=\"https:\/\/www.w3.org\/blog\/2018\/wcag21-rec\/\">W3C-Empfehlung<\/a> wurde. W\u00e4hrend Formate wie <code>.ttf<\/code> und <code>.otf<\/code> als variable Schriftart verwendet werden k\u00f6nnen, ist das effizienteste Format <code>.woff2<\/code>. Alle modernen Browser unterst\u00fctzen variable Schriftarten.<\/p>\n<p>Der Klarheit halber unterscheiden wir hier zwischen &#8222;Webfonts&#8220; und &#8222;variablen Schriftarten&#8220;. In der Praxis werden variable Schriftarten jedoch oft mit Webfonts in einen Topf geworfen.<\/p>\n<h3>Warum variable Schriftarten verwenden?<\/h3>\n<p>Es gibt drei wichtige Gr\u00fcnde, warum du variable Schriftarten in deinen Projekten verwenden solltest:<\/p>\n<ol start=\"1\">\n<li><strong>Bessere Leistung:<\/strong> Anstatt mehrere separate Schriftartendateien (Regular, Bold, Italic usw.) aufzurufen, kann eine variable Schriftartdatei alles abdecken. Das bedeutet weniger <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-eine-http-anfrage\/\">HTTP-Anfragen<\/a> und schnellere Ladezeiten.<\/li>\n<li><strong>Design-Flexibilit\u00e4t:<\/strong> Mit variablen Schriftarten hast du eine fein abgestufte Kontrolle. Anstatt auf <code>font-weight: 500<\/code> oder <code>600<\/code> festgelegt zu sein, kannst du z. B. einen eigenen Wert wie <code>532<\/code> einstellen.<\/li>\n<li><strong>Responsive Typografie:<\/strong> Da sich variable Schriftarten stufenlos anpassen lassen, kannst du Typografie erstellen, die auf allen Ger\u00e4ten funktioniert. Ein gutes Beispiel daf\u00fcr ist die Verwendung von <code>font-weight: clamp()<\/code>, um die Gewichtung zwischen den Viewports zu skalieren, ohne die abrupten &#8222;Spr\u00fcnge&#8220;, die bei statischen Schriftdateien auftreten.<\/li>\n<\/ol>\n<h2>Wie WordPress variable Schriftarten verwendet<\/h2>\n<p>Mit der Ver\u00f6ffentlichung von <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-6-1\/\">WordPress 6.1<\/a> im November 2022 wurde die Unterst\u00fctzung f\u00fcr variable Schriftarten in das System <code>theme.json<\/code> aufgenommen. Die erste Demonstration daf\u00fcr war das <a href=\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-three-theme\/\">Twenty-<\/a><a href=\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-three-theme\/\">Twenty-Three-Theme<\/a>.<\/p>\n<h3>Anpassen eines Themes mit variablen Schriftarten<\/h3>\n<p>Wenn wir mit einem <a href=\"https:\/\/kinsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\">Child-Theme<\/a> von TT5 arbeiten, beginnen wir damit, sowohl die Stile des Parent- als auch des Child-Theme einzureihen.<\/p>\n<p>Um sicherzustellen, dass unsere benutzerdefinierten Schriftarten sowohl im Editor als auch im Frontend einheitlich angezeigt werden, stellen wir auch eine <code>fonts.css<\/code> Datei mit den notwendigen <code>@font-face<\/code> Deklarationen ein.<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/\/ enqueue parent and child styles\nadd_action('wp_enqueue_scripts', function() {\n   wp_enqueue_style(\n       'parent-style',\n       get_template_directory_uri() . '\/style.css'\n   );\n\n   wp_enqueue_style(\n       'child-style',\n       get_stylesheet_uri(),\n       array('parent-style'),\n       wp_get_theme()-&gt;get('Version')\n   );\n\n   \/\/ enqueue custom fonts\n   wp_enqueue_style(\n       'child-fonts',\n       get_stylesheet_directory_uri() . '\/fonts.css',\n       array(),\n       wp_get_theme()-&gt;get('Version')\n   );\n});<\/code><\/pre>\n<p>Wie du Skripte in die Warteschlange einf\u00fcgst, h\u00e4ngt wie immer vom jeweiligen Theme ab. Es gibt keine einheitliche Methode.<\/p>\n<p>Um sicherzustellen, dass wir unser Child-Theme richtig eingerichtet haben, f\u00fchren wir diesen Test in <code>styles.css<\/code> durch:<\/p>\n<pre><code class=\"language-css\">body { background: #0000ff; }<\/code><\/pre>\n<h3>Hinzuf\u00fcgen von Schriftarten mit theme.json<\/h3>\n<p>TT5 enth\u00e4lt bereits standardm\u00e4\u00dfig zwei variable Schriftarten: <a href=\"https:\/\/fonts.google.com\/specimen\/Manrope\">Manrope<\/a> und <a href=\"https:\/\/fonts.google.com\/specimen\/Fira+Code\">Fira Code<\/a>. F\u00fcr dieses Beispiel f\u00fcgen wir <a href=\"https:\/\/fonts.google.com\/specimen\/Vollkorn\">Vollkorn<\/a> hinzu und machen sie zur Standardschriftart f\u00fcr \u00dcberschriften mit der St\u00e4rke 600.<\/p>\n<p>Hier ist der relevante Teil von <code>theme.json<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.7\/theme.json\",\n  \"version\": 3,\n  \"settings\": {\n    \"appearanceTools\": true,\n    \"typography\": {\n      \"fontFamilies\": [\n        {\n          \"name\": \"Manrope\",\n          \"slug\": \"manrope\",\n          \"fontFamily\": \"Manrope, sans-serif\",\n          \"fontFace\": [\n            {\n              \"fontFamily\": \"Manrope\",\n              \"src\": [\"file:..\/twentytwentyfive\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2\"],\n              \"fontWeight\": \"200 800\",\n              \"fontStyle\": \"normal\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Fira Code\",\n          \"slug\": \"fira-code\",\n          \"fontFamily\": \"\"Fira Code\", monospace\",\n          \"fontFace\": [\n            {\n              \"fontFamily\": \"\"Fira Code\"\",\n              \"src\": [\"file:..\/twentytwentyfive\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2\"],\n              \"fontWeight\": \"300 700\",\n              \"fontStyle\": \"normal\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Vollkorn\",\n          \"slug\": \"vollkorn\",\n          \"fontFamily\": \"Vollkorn, serif\",\n          \"fontFace\": [\n            {\n              \"fontFamily\": \"Vollkorn\",\n              \"src\": [\"file:..\/twentytwentyfive\/assets\/fonts\/vollkorn\/Vollkorn-VariableFont_wght.woff2\"],\n              \"fontWeight\": \"400 900\",\n              \"fontStyle\": \"normal\"\n            },\n            {\n              \"fontFamily\": \"Vollkorn\",\n              \"src\": [\"file:..\/twentytwentyfive\/assets\/fonts\/vollkorn\/Vollkorn-Italic-VariableFont_wght.woff2\"],\n              \"fontWeight\": \"400 900\",\n              \"fontStyle\": \"italic\"\n            }\n          ]\n        }\n      ],\n      \"customFontSize\": true,\n      \"fluid\": true\n    }\n  },\n  \"styles\": {\n    \"typography\": {\n      \"fontFamily\": \"var:preset|font-family|manrope\"\n    },\n    \"elements\": {\n      \"heading\": {\n        \"typography\": {\n          \"fontFamily\": \"var:preset|font-family|vollkorn\",\n          \"fontWeight\": \"600\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Das Ergebnis ist das Erscheinungsbild der Schriftart Vollkorn auf der gesamten Website.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/08\/vollkorn-in-wp.png\" alt=\"Die Schriftart Vollkorn ist jetzt in der WordPress-Schriftartenbibliothek verf\u00fcgbar\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Die Schriftart Vollkorn ist jetzt in der WordPress-Schriftartenbibliothek verf\u00fcgbar<\/figcaption><\/figure>\n<p>Einige Dinge sind zu beachten:<\/p>\n<ul>\n<li>Du solltest die Manrope- und Fira-Code-Dateien auf das Child kopieren, falls TT5 mit neuen Pfaden zu den Dateien aktualisiert wird.<\/li>\n<li>Es mag den Anschein haben, dass der Code f\u00fcr diese Schriftarten \u00fcberfl\u00fcssig ist, da sie bereits im Parent-Theme registriert sind. Es ist jedoch wichtig, dass du sie in deinem Child-Theme deklarierst. So wird sichergestellt, dass sie in der Font Library UI korrekt angezeigt werden und auch dann noch verf\u00fcgbar sind, wenn das Parent-Theme mit neuen Dateipfaden oder \u00c4nderungen aktualisiert wird.<\/li>\n<li>Wir verweisen auf zwei verschiedene Vollkorndateien.<\/li>\n<\/ul>\n<h3>Sicherstellen, dass Schriften richtig geladen werden<\/h3>\n<p>Manchmal werden Schriften im Frontend nicht richtig angezeigt, wenn du sie nicht in CSS deklarierst. Hier ist eine typische <code>styles.css<\/code>:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: TT5 Child\nTemplate: twentytwentyfive\nVersion: 1.0\n*\/\n\n\/* Ensure fonts are loaded and applied *\/\nbody {\n  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n               Oxygen-Sans, Ubuntu, Cantarell, sans-serif;\n}\n\ncode,\npre {\n  font-family: 'Fira Code', 'Courier New', monospace;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: 'Vollkorn', 'Times New Roman', serif;\n}<\/code><\/pre>\n<p>Und in <code>fonts.css<\/code> deklarieren wir die Schriftartendateien mit <code>@font-face<\/code>. Dadurch wird sichergestellt, dass der Browser wei\u00df, welche Schriftarten er laden und anwenden muss. Wenn du kritische Schriftarten <strong>wirklich vorladen<\/strong> willst (z. B. deine Hauptschriftart f\u00fcr die \u00dcberschrift), kannst du auch eine <code>&lt;link rel=\"preload\"&gt;<\/code> \u00fcber <a href=\"https:\/\/developer.wordpress.org\/plugins\/hooks\/\">WordPress-Hooks<\/a> in die <code>&lt;head&gt;<\/code> einf\u00fcgen. In den meisten F\u00e4llen bietet die Regel <code>@font-face<\/code> mit <code>font-display: swap<\/code> ein gutes Gleichgewicht zwischen Leistung und Benutzerfreundlichkeit.<\/p>\n<pre><code class=\"language-css\">\/* Preload critical fonts for better performance *\/\n@font-face {\n  font-family: 'Manrope';\n  src: url('..\/twentytwentyfive\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2')\n       format('woff2');\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Fira Code';\n  src: url('..\/twentytwentyfive\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2')\n       format('woff2');\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Vollkorn';\n  src: url('..\/twentytwentyfive\/assets\/fonts\/vollkorn\/Vollkorn-VariableFont_wght.woff2')\n       format('woff2');\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Vollkorn';\n  src: url('..\/twentytwentyfive\/assets\/fonts\/vollkorn\/Vollkorn-Italic-VariableFont_wght.woff2')\n       format('woff2');\n  font-weight: 100 900;\n  font-style: italic;\n  font-display: swap;\n}<\/code><\/pre>\n<p>Das Ergebnis ist eine Website, auf der die \u00dcberschriften standardm\u00e4\u00dfig Vollkorn mit einer Schriftst\u00e4rke von 600 sind.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/08\/using-vollkorn.png\" alt=\"Schriftart Vollkorn, die im WordPress-Editor als Standardschriftart f\u00fcr \u00dcberschriften eingestellt ist\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Schriftart Vollkorn, die im WordPress-Editor als Standardschriftart f\u00fcr \u00dcberschriften eingestellt ist<\/figcaption><\/figure>\n<p>Wenn du m\u00f6chtest, kannst du die <code>@font-face<\/code> at-Regeln in <code>styles.css<\/code> einf\u00fcgen. Dann musst du auch die Datei <code>fonts.css<\/code> nicht mehr einbinden.<\/p>\n<h2>Einfachere Auswahl der Schriftarten f\u00fcr die Nutzer<\/h2>\n<p>Einer der gr\u00f6\u00dften Vorteile von variablen Schriftarten ist, dass die Gewichte nicht auf feste Werte wie 400 oder 600 beschr\u00e4nkt sind. Du kannst jeden Wert <strong>zwischen<\/strong> <strong>100 und 900<\/strong> verwenden. Der Haken an der Sache ist, dass WordPress von Haus aus keine Benutzeroberfl\u00e4che f\u00fcr die Auswahl dieser benutzerdefinierten Schnitte bereitstellt.<\/p>\n<p>Um das zu \u00e4ndern, haben wir ein <strong>kleines Plugin<\/strong> namens <em>Font Weight Options<\/em> entwickelt. Es f\u00fcgt eine Einstellungsseite unter <strong>Erscheinungsbild<\/strong> &gt; <strong>Schriftgrad<\/strong> hinzu, auf der du benutzerdefinierte Schriftgrade f\u00fcr Flie\u00dftext, \u00dcberschriften und Codebl\u00f6cke festlegen kannst.<\/p>\n<p>Hier ist ein kleiner Einblick in die Kernlogik:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Font Weight Options\n *\/\n\nclass Font_Weight_Options {\n    public function __construct() {\n        add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );\n        add_action( 'wp_head', array( $this, 'apply_font_weights_frontend' ) );\n    }\n\n    public function add_admin_menu() {\n        add_theme_page(\n            __( 'Font Weight Settings', 'font-weight-options' ),\n            __( 'Font Weight', 'font-weight-options' ),\n            'manage_options',\n            'font-weight-settings',\n            array( $this, 'render_admin_page' )\n        );\n    }\n\n    public function apply_font_weights_frontend() {\n        $weights = get_option( 'fwo_font_weights', array(\n            'body' =&gt; 400,\n            'headings' =&gt; 600,\n            'code' =&gt; 400,\n        ) );\n\n        echo \"&lt;style&gt;\n            body { font-weight: {$weights['body']} !important; }\n            h1, h2, h3, h4, h5, h6 { font-weight: {$weights['headings']} !important; }\n            code, pre { font-weight: {$weights['code']} !important; }\n        &lt;\/style&gt;\";\n    }\n}\n\nnew Font_Weight_Options();<\/code><\/pre>\n<p>Das Snippet oben zeigt die Kernlogik. Wir haben den vollst\u00e4ndigen <a href=\"https:\/\/gist.github.com\/olawanlejoel\/964409d74b71fb98e36b56179b8b09ec\">Quellcode auf GitHub Gist<\/a> ver\u00f6ffentlicht, wenn du das komplette Plugin sehen m\u00f6chtest, einschlie\u00dflich des Einstellungsformulars und der Validierung.<\/p>\n<p>Die Vollversion f\u00fcgt hinzu:<\/p>\n<ul>\n<li>Standardwerte bei der Aktivierung des Plugins<\/li>\n<li>Ein einfaches Admin-Einstellungsformular mit Zahlenfeldern (100-900)<\/li>\n<li>Validierung, damit die Werte im Bereich bleiben<\/li>\n<li>Ausgabe der Gewichte sowohl im Block-Editor als auch im Frontend<\/li>\n<\/ul>\n<p>Das Ergebnis ist diese neue Seite in unserem WP-Admin, auf der die Nutzer die Schriftgewichte f\u00fcr unsere drei Schriftarten einstellen k\u00f6nnen. Wir haben drei &#8222;Nicht-Standard&#8220;-Werte gew\u00e4hlt.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/08\/new-font-weight.png\" alt=\"Neue Einstellungsseite f\u00fcr Schriftgewichte im WordPress-Admin-Dashboard\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Neue Einstellungsseite f\u00fcr Schriftgewichte im WordPress-Admin-Dashboard<\/figcaption><\/figure>\n<p>Das Ergebnis ist eine Seite mit den entsprechenden Schriftschnitten, die im Seiteneditor und im Frontend wie erwartet dargestellt werden.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/08\/test-fonts-wp.png\" alt=\"Seite in der WordPress-Verwaltung, die drei Schriftarten mit ihren zugewiesenen Breiten anzeigt\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Seite in der WordPress-Verwaltung, die drei Schriftarten mit ihren zugewiesenen Breiten anzeigt<\/figcaption><\/figure>\n<h2>Eine freundlichere, einfachere Art, eine einzelne variable Schriftart hinzuzuf\u00fcgen<\/h2>\n<p>Wenn du damit \u00fcberfordert bist, haben wir eine Alternative, die zwar nicht den vollen Funktionsumfang hat, aber eine schnelle M\u00f6glichkeit ist, eine beliebige Schriftart in dein Theme einzubinden.<\/p>\n<p>Du kannst Google Fonts ganz einfach \u00fcber die Schriftartenbibliothek hinzuf\u00fcgen. Wenn du das bevorzugst, solltest du dir unseren Artikel \u00fcber die <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-google-fonts\/?utm_source=chatgpt.com\">15 besten Google Fonts nach Zahlen (und Tipps zu ihrer Verwendung)<\/a> ansehen, der dir helfen wird.<\/p>\n<p>Aber was ist, wenn du etwas anderes als eine Google-Schriftart bevorzugst? Es gibt viele M\u00f6glichkeiten, um ordnungsgem\u00e4\u00df lizenzierte Open-Source-Schriftarten f\u00fcr deine Projekte zu bekommen. Wir haben uns an GitHub gewandt, um <a href=\"https:\/\/github.com\/adobe-fonts\/source-sans\/blob\/release\/VF\/SourceSans3VF-Upright.otf\">SourceSans3VF-Upright<\/a>, eine Adobe-Schriftart, zu bekommen.<\/p>\n<p>Unser Ziel ist es, diese als optionale Schriftart zu verwenden, die im Editor und im Frontend korrekt angezeigt wird.<\/p>\n<p>Die Schriftartdatei befindet sich im Ordner <code>\/assets\/fonts<\/code> unseres Child-Themes. Von dort aus haben wir <code>functions.php<\/code> erstellt.<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Enqueue parent and child theme styles.\n *\/\nfunction twentytwentyfive_kinstachild_enqueue_styles() {\n    \/\/ Parent theme style.\n    wp_enqueue_style(\n        'twentytwentyfive-style',\n        get_parent_theme_file_uri( 'style.css' ),\n        array(),\n        wp_get_theme()-&gt;get( 'Version' )\n    );\n\n    \/\/ Child theme style.\n    wp_enqueue_style(\n        'twentytwentyfive-child-style',\n        get_stylesheet_uri(),\n        array( 'twentytwentyfive-style' ),\n        wp_get_theme()-&gt;get( 'Version' )\n    );\n}\nadd_action( 'wp_enqueue_scripts', 'twentytwentyfive_kinstachild_enqueue_styles' );\n\n\/**\n * Enqueue child theme styles in the editor.\n *\/\nadd_action( 'after_setup_theme', function() {\n    add_editor_style( 'style.css' );\n} );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Beachte, dass wir bei dieser einfacheren Konfiguration die benutzerdefinierten Schriftarten nicht manuell einreihen m\u00fcssen. Das liegt daran, dass variable Schriftarten, die in <code>theme.json<\/code> definiert sind, automatisch von WordPress verarbeitet werden, solange sie richtig deklariert sind. Das ist einer der Vorteile des Block-Theme-Systems.<\/p>\n<\/aside>\n\n<p>Wie im vorherigen Beispiel muss unsere Datei <code>theme.json<\/code> auf den Manrope- und den Fira-Code der \u00fcbergeordneten Seite verweisen. Wenn du sie wegl\u00e4sst, werden sie aus unserem Theme entfernt.<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.7\/theme.json\",\n  \"version\": 3,\n  \"settings\": {\n    \"typography\": {\n      \"fontFamilies\": [\n        {\n          \"name\": \"Manrope\",\n          \"slug\": \"manrope\",\n          \"fontFamily\": \"Manrope, sans-serif\",\n          \"fontFace\": [\n            {\n              \"src\": [\n                \"file:..\/twentytwentyfive\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2\"\n              ],\n              \"fontWeight\": \"100 900\",\n              \"fontStyle\": \"normal\",\n              \"fontFamily\": \"Manrope\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Fira Code\",\n          \"slug\": \"fira-code\",\n          \"fontFamily\": \"\"Fira Code\", monospace\",\n          \"fontFace\": [\n            {\n              \"src\": [\n                \"file:..\/twentytwentyfive\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2\"\n              ],\n              \"fontWeight\": \"100 900\",\n              \"fontStyle\": \"normal\",\n              \"fontFamily\": \"\"Fira Code\"\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Source Sans 3\",\n          \"slug\": \"source-sans-3\",\n          \"fontFamily\": \"\"Source Sans 3\", sans-serif\",\n          \"fontFace\": [\n            {\n              \"src\": [\n                \"file:.\/assets\/fonts\/SourceSans3VF-Upright.woff2\"\n              ],\n              \"fontWeight\": \"100 900\",\n              \"fontStyle\": \"normal\",\n              \"fontFamily\": \"Source Sans 3\"\n            }\n          ]\n        }\n      ]\n    }\n  }\n}<\/code><\/pre>\n<p>Denke daran, dass du immer noch eine grundlegende <code>styles.css<\/code> Datei brauchst, die die wichtigsten Metadaten enth\u00e4lt, die WordPress mitteilen, dass du mit einem Child-Theme arbeitest.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Egal, ob du dich f\u00fcr eine vollst\u00e4ndig angepasste Einrichtung oder eine schnelle Integration entscheidest, variable Schriftarten in WordPress sind eine gute M\u00f6glichkeit, die Typografie deiner Website aufzuwerten. Sie verbessern die Leistung, verringern die Komplexit\u00e4t und bieten dir reaktionsschnelle, flexible Designoptionen, die mit herk\u00f6mmlichen statischen Schriftarten einfach nicht m\u00f6glich sind.<\/p>\n<p>Um ihr volles Potenzial auszusch\u00f6pfen, musst du m\u00f6glicherweise eine benutzerdefinierte Oberfl\u00e4che erstellen, die die variablen Achsen (wie Gewicht, Neigung oder optische Gr\u00f6\u00dfe) sichtbar macht und den Website-Besitzern mehr Kontrolle gibt.<\/p>\n<p>Wenn du eine WordPress-Website auf der <a href=\"https:\/\/kinsta.com\/de\/wordpress-hosting\/\">Hosting-Plattform von Kinsta<\/a> erstellst, profitierst du au\u00dferdem von der leistungsorientierten Infrastruktur, die es noch einfacher macht, moderne Assets wie variable Schriftarten effizient zu nutzen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Seit der Einf\u00fchrung von Webfonts im Jahr 2009 steht Webdesignern eine breite Palette an Schriftarten zur Verf\u00fcgung. Diese Schriften wurden gr\u00f6\u00dftenteils durch die CSS @fontface at-Regel &#8230;<\/p>\n","protected":false},"author":313,"featured_media":74184,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[999,1009],"class_list":["post-74183","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-entwicklung","topic-wordpress-themes"],"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>Verwendung variabler Schriftarten in WordPress-Themes<\/title>\n<meta name=\"description\" content=\"Lerne, wie du variable Schriftarten in WordPress-Themes mit theme.json nutzen kannst, um die Leistung und Flexibilit\u00e4t beim Design zu verbessern.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Verwendung variabler Schriftarten in WordPress-Themes\" \/>\n<meta property=\"og:description\" content=\"Lerne, wie du variable Schriftarten in WordPress-Themes mit theme.json nutzen kannst, um die Leistung und Flexibilit\u00e4t beim Design zu verbessern.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-25T07:16:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-29T10:16:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/09\/using-variable-fonts-in-wordpress-themes.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bud Kraus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lerne, wie du variable Schriftarten in WordPress-Themes mit theme.json nutzen kannst, um die Leistung und Flexibilit\u00e4t beim Design zu verbessern.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/09\/using-variable-fonts-in-wordpress-themes.png\" \/>\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=\"Bud Kraus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"11\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/\"},\"author\":{\"name\":\"Bud Kraus\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\"},\"headline\":\"Verwendung variabler Schriftarten in WordPress-Themes\",\"datePublished\":\"2025-09-25T07:16:56+00:00\",\"dateModified\":\"2025-09-29T10:16:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/\"},\"wordCount\":1463,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/09\/using-variable-fonts-in-wordpress-themes.png\",\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/\",\"name\":\"Verwendung variabler Schriftarten in WordPress-Themes\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/09\/using-variable-fonts-in-wordpress-themes.png\",\"datePublished\":\"2025-09-25T07:16:56+00:00\",\"dateModified\":\"2025-09-29T10:16:35+00:00\",\"description\":\"Lerne, wie du variable Schriftarten in WordPress-Themes mit theme.json nutzen kannst, um die Leistung und Flexibilit\u00e4t beim Design zu verbessern.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/09\/using-variable-fonts-in-wordpress-themes.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/09\/using-variable-fonts-in-wordpress-themes.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress-Themes\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-themes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Verwendung variabler Schriftarten in WordPress-Themes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\",\"name\":\"Bud Kraus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"caption\":\"Bud Kraus\"},\"description\":\"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/budkraus\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Verwendung variabler Schriftarten in WordPress-Themes","description":"Lerne, wie du variable Schriftarten in WordPress-Themes mit theme.json nutzen kannst, um die Leistung und Flexibilit\u00e4t beim Design zu verbessern.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/","og_locale":"de_DE","og_type":"article","og_title":"Verwendung variabler Schriftarten in WordPress-Themes","og_description":"Lerne, wie du variable Schriftarten in WordPress-Themes mit theme.json nutzen kannst, um die Leistung und Flexibilit\u00e4t beim Design zu verbessern.","og_url":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2025-09-25T07:16:56+00:00","article_modified_time":"2025-09-29T10:16:35+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/09\/using-variable-fonts-in-wordpress-themes.png","type":"image\/png"}],"author":"Bud Kraus","twitter_card":"summary_large_image","twitter_description":"Lerne, wie du variable Schriftarten in WordPress-Themes mit theme.json nutzen kannst, um die Leistung und Flexibilit\u00e4t beim Design zu verbessern.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/09\/using-variable-fonts-in-wordpress-themes.png","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Bud Kraus","Gesch\u00e4tzte Lesezeit":"11\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/"},"author":{"name":"Bud Kraus","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed"},"headline":"Verwendung variabler Schriftarten in WordPress-Themes","datePublished":"2025-09-25T07:16:56+00:00","dateModified":"2025-09-29T10:16:35+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/"},"wordCount":1463,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/09\/using-variable-fonts-in-wordpress-themes.png","inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/","url":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/","name":"Verwendung variabler Schriftarten in WordPress-Themes","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/09\/using-variable-fonts-in-wordpress-themes.png","datePublished":"2025-09-25T07:16:56+00:00","dateModified":"2025-09-29T10:16:35+00:00","description":"Lerne, wie du variable Schriftarten in WordPress-Themes mit theme.json nutzen kannst, um die Leistung und Flexibilit\u00e4t beim Design zu verbessern.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/09\/using-variable-fonts-in-wordpress-themes.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/09\/using-variable-fonts-in-wordpress-themes.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/variable-schriftarten\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress-Themes","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-themes\/"},{"@type":"ListItem","position":3,"name":"Verwendung variabler Schriftarten in WordPress-Themes"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed","name":"Bud Kraus","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","caption":"Bud Kraus"},"description":"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.","url":"https:\/\/kinsta.com\/de\/blog\/author\/budkraus\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/74183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/313"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=74183"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/74183\/revisions"}],"predecessor-version":[{"id":74199,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/74183\/revisions\/74199"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74183\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74183\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74183\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74183\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74183\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74183\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74183\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74183\/translations\/pt"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74183\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/74184"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=74183"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=74183"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=74183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}