Level: Anfänger

Elementor: font-display für Custom Fonts ändern

Elementor setzt standardmäßig font-display: auto; und überlässt es damit dem Browser, wie mit Custom Fonts umgegangen wird.

Es gibt aktuell leider keine Möglichkeit, diese Eigenschaft über das Elementor-Interface zu steuern.

Mit folgendem Code in deiner functions.php kannst du aber dein gewünschtes Verhalten definieren. Passe dafür einfach Zeile 7 an.

Code für functions.php

Füge folgenden Code ans Ende deiner functions.php-Datei hinzu:

/**
 * Control how font files are loaded and displayed by the browser.
 * Set the `font-display` property to `swap`.
 */
function update_font_display() {

	return 'swap'; // Or any other value.

}
add_filter( 'elementor_pro/custom_fonts/font_display', 'update_font_display' );

Mögliche Werte sind:

font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

Weitere Informationen zur font-display-Eigenschaft findest du z.B. in den Mozilla Web Docs.

Weitere Code-Snippets

Hier findest du weitere Code-Schnipsel, die mir und dir das Leben erleichtern.