# 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.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: theme-json, fonts, performance
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/themejson-font-display/

## Code

```php
// 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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Show Text While Theme Fonts Load (font-display)" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/