Show Text While Theme Fonts Load (font-display)
Changes the font-display setting of every font the theme registers in theme.json, so text shows immediately in a fallback font instead of staying invisible while web fonts load.
Opens WPIDE on
Code
// font-display value: swap, optional, fallback or block.
$wpide_font_display = 'swap';
add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_font_display ) {
$data = $theme_json->get_data();
$families = isset( $data['settings']['typography']['fontFamilies'] ) ? (array) $data['settings']['typography']['fontFamilies'] : array();
$families = isset( $families['theme'] ) ? (array) $families['theme'] : $families;
$changed = false;
foreach ( $families as $i => $family ) {
if ( empty( $family['fontFace'] ) || ! is_array( $family['fontFace'] ) ) {
continue;
}
foreach ( $family['fontFace'] as $j => $face ) {
$families[ $i ]['fontFace'][ $j ]['fontDisplay'] = $wpide_font_display;
$changed = true;
}
}
if ( ! $changed ) {
return $theme_json;
}
return $theme_json->update_with( array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'settings' => array( 'typography' => array( 'fontFamilies' => $families ) ),
) );
} );Notes
Use swap to always switch to the web font, or optional to keep the fallback on slow connections and avoid layout shifts.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.