# Preload Key Web Fonts

> Preloads the font files used above the fold, so text appears in the right font sooner and the layout shifts less.

- Type: PHP
- Runs: Frontend only
- Category: [Performance](https://wpide.com/library/category/performance/)
- Tags: performance, fonts, core-web-vitals
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/preload-web-fonts/

## Code

```php
// Full URLs of the WOFF2 files to preload (usually one or two: body text and headings).
$wpide_preload_fonts = array(
    get_stylesheet_directory_uri() . '/assets/fonts/inter-regular.woff2',
);

add_filter( 'wp_preload_resources', function ( $resources ) use ( $wpide_preload_fonts ) {
    foreach ( $wpide_preload_fonts as $url ) {
        $resources[] = array(
            'href'        => $url,
            'as'          => 'font',
            'type'        => 'font/woff2',
            'crossorigin' => 'anonymous',
        );
    }

    return $resources;
} );
```

## Notes

Copy the exact font URLs from your browser's Network panel and preload no more than one or two.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Preload Key Web Fonts" 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/