Seit der Einführung von Webfonts im Jahr 2009 steht Webdesignern eine breite Palette an Schriftarten zur Verfügung. Diese Schriften wurden größtenteils durch die CSS @fontface at-Regel verwendet, die es Designern ermöglichte, sich von websicheren (System-)Schriften zu lösen.
Eine Vielzahl von Schriftdateiformaten wurde (und wird) von großen Schriftgießereien angeboten, vor allem von Google Fonts.
Damals bedeutete die Verwendung von Webfonts, dass man mit separaten Dateien für jede Schriftstärke und jeden Stil arbeiten musste. Dateinamen wie die folgenden machten deutlich, wie die Schriftart im Gebrauch aussehen würde:
Roboto-Italic.woff2
Lato-BoldItalic.woff2
OpenSans-SemiBold.ttf
WorkSans-ExtraBold.ttfJede Variante musste als eigene Datei geladen werden. Das erhöhte den Seitenumfang, erforderte mehr HTTP-Anfragen und machte die Auswahl und Anwendung von Schriftarten in einem Design komplizierter.
Der Aufstieg der variablen Schriftarten
Im Jahr 2016 gab es einen großen Durchbruch in der digitalen Typografie: variable Schriftarten. Sie wurden in Zusammenarbeit von Google, Apple, Adobe und Microsoft entwickelt und haben sich schnell durchgesetzt.
Eine variable Schriftart zeichnet sich dadurch aus, dass sie alle folgenden Elemente enthalten kann, die jeweils als Achse bezeichnet werden:
| Achse | CSS-Eigenschaft |
| Schriftstärke | font-weight |
| Stil | font-style: italic |
| schräg | font-style: oblique |
| dehnen | font-stretch |
| Optische Größenachse (opsz) | font-variations-setting |
Das am weitesten verbreitete Dateiformat ist .woff2 (Web Open Font Format), ein stark komprimiertes Format, das 2018 zu einer W3C-Empfehlung wurde. Während Formate wie .ttf und .otf als variable Schriftart verwendet werden können, ist das effizienteste Format .woff2. Alle modernen Browser unterstützen variable Schriftarten.
Der Klarheit halber unterscheiden wir hier zwischen „Webfonts“ und „variablen Schriftarten“. In der Praxis werden variable Schriftarten jedoch oft mit Webfonts in einen Topf geworfen.
Warum variable Schriftarten verwenden?
Es gibt drei wichtige Gründe, warum du variable Schriftarten in deinen Projekten verwenden solltest:
- Bessere Leistung: Anstatt mehrere separate Schriftartendateien (Regular, Bold, Italic usw.) aufzurufen, kann eine variable Schriftartdatei alles abdecken. Das bedeutet weniger HTTP-Anfragen und schnellere Ladezeiten.
- Design-Flexibilität: Mit variablen Schriftarten hast du eine fein abgestufte Kontrolle. Anstatt auf
font-weight: 500oder600festgelegt zu sein, kannst du z. B. einen eigenen Wert wie532einstellen. - Responsive Typografie: Da sich variable Schriftarten stufenlos anpassen lassen, kannst du Typografie erstellen, die auf allen Geräten funktioniert. Ein gutes Beispiel dafür ist die Verwendung von
font-weight: clamp(), um die Gewichtung zwischen den Viewports zu skalieren, ohne die abrupten „Sprünge“, die bei statischen Schriftdateien auftreten.
Wie WordPress variable Schriftarten verwendet
Mit der Veröffentlichung von WordPress 6.1 im November 2022 wurde die Unterstützung für variable Schriftarten in das System theme.json aufgenommen. Die erste Demonstration dafür war das Twenty-Twenty-Three-Theme.
Anpassen eines Themes mit variablen Schriftarten
Wenn wir mit einem Child-Theme von TT5 arbeiten, beginnen wir damit, sowohl die Stile des Parent- als auch des Child-Theme einzureihen.
Um sicherzustellen, dass unsere benutzerdefinierten Schriftarten sowohl im Editor als auch im Frontend einheitlich angezeigt werden, stellen wir auch eine fonts.css Datei mit den notwendigen @font-face Deklarationen ein.
<?php
// enqueue parent and child styles
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parent-style'),
wp_get_theme()->get('Version')
);
// enqueue custom fonts
wp_enqueue_style(
'child-fonts',
get_stylesheet_directory_uri() . '/fonts.css',
array(),
wp_get_theme()->get('Version')
);
});Wie du Skripte in die Warteschlange einfügst, hängt wie immer vom jeweiligen Theme ab. Es gibt keine einheitliche Methode.
Um sicherzustellen, dass wir unser Child-Theme richtig eingerichtet haben, führen wir diesen Test in styles.css durch:
body { background: #0000ff; }Hinzufügen von Schriftarten mit theme.json
TT5 enthält bereits standardmäßig zwei variable Schriftarten: Manrope und Fira Code. Für dieses Beispiel fügen wir Vollkorn hinzu und machen sie zur Standardschriftart für Überschriften mit der Stärke 600.
Hier ist der relevante Teil von theme.json:
{
"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"fontFamily": "Manrope",
"src": ["file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"],
"fontWeight": "200 800",
"fontStyle": "normal"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": ""Fira Code", monospace",
"fontFace": [
{
"fontFamily": ""Fira Code"",
"src": ["file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"],
"fontWeight": "300 700",
"fontStyle": "normal"
}
]
},
{
"name": "Vollkorn",
"slug": "vollkorn",
"fontFamily": "Vollkorn, serif",
"fontFace": [
{
"fontFamily": "Vollkorn",
"src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2"],
"fontWeight": "400 900",
"fontStyle": "normal"
},
{
"fontFamily": "Vollkorn",
"src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2"],
"fontWeight": "400 900",
"fontStyle": "italic"
}
]
}
],
"customFontSize": true,
"fluid": true
}
},
"styles": {
"typography": {
"fontFamily": "var:preset|font-family|manrope"
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var:preset|font-family|vollkorn",
"fontWeight": "600"
}
}
}
}
}Das Ergebnis ist das Erscheinungsbild der Schriftart Vollkorn auf der gesamten Website.
Einige Dinge sind zu beachten:
- Du solltest die Manrope- und Fira-Code-Dateien auf das Child kopieren, falls TT5 mit neuen Pfaden zu den Dateien aktualisiert wird.
- Es mag den Anschein haben, dass der Code für diese Schriftarten überflüssig 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ügbar sind, wenn das Parent-Theme mit neuen Dateipfaden oder Änderungen aktualisiert wird.
- Wir verweisen auf zwei verschiedene Vollkorndateien.
Sicherstellen, dass Schriften richtig geladen werden
Manchmal werden Schriften im Frontend nicht richtig angezeigt, wenn du sie nicht in CSS deklarierst. Hier ist eine typische styles.css:
/*
Theme Name: TT5 Child
Template: twentytwentyfive
Version: 1.0
*/
/* Ensure fonts are loaded and applied */
body {
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}
code,
pre {
font-family: 'Fira Code', 'Courier New', monospace;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Vollkorn', 'Times New Roman', serif;
}Und in fonts.css deklarieren wir die Schriftartendateien mit @font-face. Dadurch wird sichergestellt, dass der Browser weiß, welche Schriftarten er laden und anwenden muss. Wenn du kritische Schriftarten wirklich vorladen willst (z. B. deine Hauptschriftart für die Überschrift), kannst du auch eine <link rel="preload"> über WordPress-Hooks in die <head> einfügen. In den meisten Fällen bietet die Regel @font-face mit font-display: swap ein gutes Gleichgewicht zwischen Leistung und Benutzerfreundlichkeit.
/* Preload critical fonts for better performance */
@font-face {
font-family: 'Manrope';
src: url('../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Code';
src: url('../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Vollkorn';
src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Vollkorn';
src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}Das Ergebnis ist eine Website, auf der die Überschriften standardmäßig Vollkorn mit einer Schriftstärke von 600 sind.
Wenn du möchtest, kannst du die @font-face at-Regeln in styles.css einfügen. Dann musst du auch die Datei fonts.css nicht mehr einbinden.
Einfachere Auswahl der Schriftarten für die Nutzer
Einer der größten Vorteile von variablen Schriftarten ist, dass die Gewichte nicht auf feste Werte wie 400 oder 600 beschränkt sind. Du kannst jeden Wert zwischen 100 und 900 verwenden. Der Haken an der Sache ist, dass WordPress von Haus aus keine Benutzeroberfläche für die Auswahl dieser benutzerdefinierten Schnitte bereitstellt.
Um das zu ändern, haben wir ein kleines Plugin namens Font Weight Options entwickelt. Es fügt eine Einstellungsseite unter Erscheinungsbild > Schriftgrad hinzu, auf der du benutzerdefinierte Schriftgrade für Fließtext, Überschriften und Codeblöcke festlegen kannst.
Hier ist ein kleiner Einblick in die Kernlogik:
<?php
/**
* Plugin Name: Font Weight Options
*/
class Font_Weight_Options {
public function __construct() {
add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
add_action( 'wp_head', array( $this, 'apply_font_weights_frontend' ) );
}
public function add_admin_menu() {
add_theme_page(
__( 'Font Weight Settings', 'font-weight-options' ),
__( 'Font Weight', 'font-weight-options' ),
'manage_options',
'font-weight-settings',
array( $this, 'render_admin_page' )
);
}
public function apply_font_weights_frontend() {
$weights = get_option( 'fwo_font_weights', array(
'body' => 400,
'headings' => 600,
'code' => 400,
) );
echo "<style>
body { font-weight: {$weights['body']} !important; }
h1, h2, h3, h4, h5, h6 { font-weight: {$weights['headings']} !important; }
code, pre { font-weight: {$weights['code']} !important; }
</style>";
}
}
new Font_Weight_Options();Das Snippet oben zeigt die Kernlogik. Wir haben den vollständigen Quellcode auf GitHub Gist veröffentlicht, wenn du das komplette Plugin sehen möchtest, einschließlich des Einstellungsformulars und der Validierung.
Die Vollversion fügt hinzu:
- Standardwerte bei der Aktivierung des Plugins
- Ein einfaches Admin-Einstellungsformular mit Zahlenfeldern (100-900)
- Validierung, damit die Werte im Bereich bleiben
- Ausgabe der Gewichte sowohl im Block-Editor als auch im Frontend
Das Ergebnis ist diese neue Seite in unserem WP-Admin, auf der die Nutzer die Schriftgewichte für unsere drei Schriftarten einstellen können. Wir haben drei „Nicht-Standard“-Werte gewählt.
Das Ergebnis ist eine Seite mit den entsprechenden Schriftschnitten, die im Seiteneditor und im Frontend wie erwartet dargestellt werden.
Eine freundlichere, einfachere Art, eine einzelne variable Schriftart hinzuzufügen
Wenn du damit überfordert bist, haben wir eine Alternative, die zwar nicht den vollen Funktionsumfang hat, aber eine schnelle Möglichkeit ist, eine beliebige Schriftart in dein Theme einzubinden.
Du kannst Google Fonts ganz einfach über die Schriftartenbibliothek hinzufügen. Wenn du das bevorzugst, solltest du dir unseren Artikel über die 15 besten Google Fonts nach Zahlen (und Tipps zu ihrer Verwendung) ansehen, der dir helfen wird.
Aber was ist, wenn du etwas anderes als eine Google-Schriftart bevorzugst? Es gibt viele Möglichkeiten, um ordnungsgemäß lizenzierte Open-Source-Schriftarten für deine Projekte zu bekommen. Wir haben uns an GitHub gewandt, um SourceSans3VF-Upright, eine Adobe-Schriftart, zu bekommen.
Unser Ziel ist es, diese als optionale Schriftart zu verwenden, die im Editor und im Frontend korrekt angezeigt wird.
Die Schriftartdatei befindet sich im Ordner /assets/fonts unseres Child-Themes. Von dort aus haben wir functions.php erstellt.
<?php
/**
* Enqueue parent and child theme styles.
*/
function twentytwentyfive_kinstachild_enqueue_styles() {
// Parent theme style.
wp_enqueue_style(
'twentytwentyfive-style',
get_parent_theme_file_uri( 'style.css' ),
array(),
wp_get_theme()->get( 'Version' )
);
// Child theme style.
wp_enqueue_style(
'twentytwentyfive-child-style',
get_stylesheet_uri(),
array( 'twentytwentyfive-style' ),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'twentytwentyfive_kinstachild_enqueue_styles' );
/**
* Enqueue child theme styles in the editor.
*/
add_action( 'after_setup_theme', function() {
add_editor_style( 'style.css' );
} );Wie im vorherigen Beispiel muss unsere Datei theme.json auf den Manrope- und den Fira-Code der übergeordneten Seite verweisen. Wenn du sie weglässt, werden sie aus unserem Theme entfernt.
{
"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
"version": 3,
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"src": [
"file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
],
"fontWeight": "100 900",
"fontStyle": "normal",
"fontFamily": "Manrope"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": ""Fira Code", monospace",
"fontFace": [
{
"src": [
"file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
],
"fontWeight": "100 900",
"fontStyle": "normal",
"fontFamily": ""Fira Code""
}
]
},
{
"name": "Source Sans 3",
"slug": "source-sans-3",
"fontFamily": ""Source Sans 3", sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/SourceSans3VF-Upright.woff2"
],
"fontWeight": "100 900",
"fontStyle": "normal",
"fontFamily": "Source Sans 3"
}
]
}
]
}
}
}Denke daran, dass du immer noch eine grundlegende styles.css Datei brauchst, die die wichtigsten Metadaten enthält, die WordPress mitteilen, dass du mit einem Child-Theme arbeitest.
Zusammenfassung
Egal, ob du dich für eine vollständig angepasste Einrichtung oder eine schnelle Integration entscheidest, variable Schriftarten in WordPress sind eine gute Möglichkeit, die Typografie deiner Website aufzuwerten. Sie verbessern die Leistung, verringern die Komplexität und bieten dir reaktionsschnelle, flexible Designoptionen, die mit herkömmlichen statischen Schriftarten einfach nicht möglich sind.
Um ihr volles Potenzial auszuschöpfen, musst du möglicherweise eine benutzerdefinierte Oberfläche erstellen, die die variablen Achsen (wie Gewicht, Neigung oder optische Größe) sichtbar macht und den Website-Besitzern mehr Kontrolle gibt.
Wenn du eine WordPress-Website auf der Hosting-Plattform von Kinsta erstellst, profitierst du außerdem von der leistungsorientierten Infrastruktur, die es noch einfacher macht, moderne Assets wie variable Schriftarten effizient zu nutzen.
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.
