Skip to content
HeyMadeFonts

Use HeyMadeFonts on WordPress

Load our fonts in a classic or block theme, self-host them with theme.json, and find and remove fonts that themes and plugins load from other hosts.

Last reviewed 10 November 2026.

There are two ways to use our fonts on WordPress: load them from the HeyMadeFonts CDN, or put the files on your own server. Either way, your theme and plugins may still load fonts from somewhere else, so the second half of this guide covers how to find and remove those.

Choose a family

Pick a family in the catalogue. Each font page has a CDN snippet and, under “Self-host instead”, the WOFF2 files and a ZIP download. The examples below use Sandhavn. If the site already uses fonts from another host, paste its <head> into the switch tool to get the closest family by style and a ready-made URL.

1. Load our CSS in a classic theme

Add this to a child theme’s functions.php or a small must-use plugin (wp-content/mu-plugins/fonts.php), so theme updates do not undo it:

PHP 
add_action( 'wp_enqueue_scripts', function () {
    // A null version stops WordPress adding ?ver=, which the CSS API rejects.
    wp_enqueue_style( 'site-fonts', 'https://fonts.heymadefonts.com/css2?family=Sandhavn:wght@400;700&display=swap', array(), null );
} );

Then use the family in your theme’s CSS, for example body { font-family: 'Sandhavn', sans-serif; }. The version argument must be null: with any other value, WordPress appends ?ver=… to the URL, and the CSS API answers that with an error instead of a stylesheet.

To self-host in a classic theme instead, upload the WOFF2 files to the child theme (for example fonts/), write a fonts.css with the @font-face rules from the self-hosting guide, and enqueue that file:

PHP 
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style( 'site-fonts', get_stylesheet_directory_uri() . '/fonts/fonts.css', array(), '1.0' );
} );

2. Self-host in a block theme

Block themes declare fonts in theme.json. Put the WOFF2 files from the font page in the child theme, for example assets/fonts/, and add the family. Our families are variable, so one file per style covers weights 100 to 900:

theme.json (excerpt) 
{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "name": "Sandhavn",
          "slug": "sandhavn",
          "fontFamily": "Sandhavn, sans-serif",
          "fontFace": [
            { "fontFamily": "Sandhavn", "fontWeight": "100 900", "fontStyle": "normal", "fontDisplay": "swap", "src": [ "file:./assets/fonts/sandhavn.woff2" ] },
            { "fontFamily": "Sandhavn", "fontWeight": "100 900", "fontStyle": "italic", "fontDisplay": "swap", "src": [ "file:./assets/fonts/sandhavn-italic.woff2" ] }
          ]
        }
      ]
    }
  }
}

WordPress generates the @font-face rules itself, and the family appears in the editor’s typography controls. Use the file names from the font page; the names above are examples. Keep the licence file from the ZIP next to the fonts.

3. The Font Library

Since WordPress 6.5 the Site Editor has a Font Library (Appearance → Editor → Styles → Typography). You can upload our WOFF2 files there; WordPress stores them in wp-content/uploads/fonts and serves them from your own server. This works without editing any theme file.

4. Find fonts from other hosts

Themes, page builders, plugins and embedded services can each load fonts from a third-party host on their own. The most common such host is fonts.googleapis.com. To find every request:

  1. Open the site logged out, in a private window, so you see what visitors see.
  2. Open the developer tools’ Network panel, reload, and filter by “font”, then by “css”. Note every request that does not go to your own domain or to the HeyMadeFonts CDN.
  3. View the page source and search for those hosts. WordPress prints enqueued stylesheets as <link rel='stylesheet' id='HANDLE-css' href='…'>. The part before -css is the handle, which you need to remove it.
  4. Repeat on a few page types: home, a post, a page built with your page builder, a form, the shop.

A website scan records the same requests with the HTML or CSS that caused each one, which makes the handle easy to find.

5. Remove them

  • Theme and plugin settings first. Many themes, page builders and plugins have a typography or performance setting that turns off their own font loading or switches to locally stored files. Check their documentation; a setting survives updates better than code.
  • Dequeue by handle. If there is no setting, remove the stylesheet in your child theme or must-use plugin:
PHP 
add_action( 'wp_enqueue_scripts', function () {
    // The handle from id='theme-fonts-css', without "-css".
    wp_dequeue_style( 'theme-fonts' );
    wp_deregister_style( 'theme-fonts' );
}, 20 );
  • The priority 20 makes the code run after the theme’s own enqueue, which normally uses the default priority 10. If the font still loads, the theme enqueues later; raise the number.
  • Some themes build the font URL from Customizer typography settings. Choosing a locally hosted font in those settings avoids the request in the first place.
  • Block themes: check that each src in theme.json starts with file:./, not a URL on another host.
  • Embedded services such as maps, videos and captchas load their own fonts and scripts. Your font settings do not change that; consider click-to-load placeholders for embeds.

6. Preconnect hints

Themes often add preconnect or dns-prefetch hints for font hosts through WordPress’s resource hints. They open a connection even when no font is requested. Remove the hosts you no longer use:

PHP 
add_filter( 'wp_resource_hints', function ( $urls, $relation_type ) {
    if ( 'preconnect' !== $relation_type && 'dns-prefetch' !== $relation_type ) {
        return $urls;
    }
    // List the font hosts you found in step 4.
    $unused_hosts = array( 'fonts.example-host.com' );
    return array_filter( $urls, function ( $url ) use ( $unused_hosts ) {
        $href = is_array( $url ) ? ( $url['href'] ?? '' ) : $url;
        foreach ( $unused_hosts as $host ) {
            if ( false !== strpos( $href, $host ) ) {
                return false;
            }
        }
        return true;
    } );
}, 20, 2 );

Hints printed directly in header.php have to be deleted from the template (in a child theme copy).

7. Caches and optimisers

Caching and optimisation plugins store combined CSS and full HTML pages, and some have their own font options. After every change, clear the plugin cache, any server or host cache, and your CDN cache. Otherwise you keep seeing, and serving, the old requests.

8. Verify

  1. Logged out, in a private window, check the Network panel on each page type: font requests should go only to your own domain or the HeyMadeFonts CDN.
  2. Check that headings and body text use the intended font and weights.
  3. Run a website scan on the important pages and keep the report as a record of what you checked and when.
  4. Re-check after theme, builder and plugin updates. An update can reintroduce a font request.

When a browser loads a font from a third-party host, it connects to that host’s servers. The request transmits the visitor’s IP address and HTTP metadata, such as the browser’s user agent, the requested URL and, depending on the referrer policy, the address of the page, to whoever operates that host. Self-hosted fonts keep those requests on your own server.

Changing how your fonts load changes which third parties your visitors’ browsers contact. It does not by itself decide whether your website as a whole meets data protection requirements. This guide is not legal advice. For compliance questions, ask a qualified lawyer or your data protection officer.