How to Load Adobe Fonts in WordPress Optimized for Performance

Incorporating custom fonts into your WordPress site can drastically enhance its design, and Adobe Fonts (formerly Typekit) offers a great library of fonts to choose from. However, loading fonts improperly can negatively affect your site’s performance, impacting both user experience and SEO.

In this guide, we’ll walk through how to integrate Adobe Fonts into WordPress while ensuring your site remains fast and efficient. We’ll cover how to load Adobe Fonts asynchronously using the WebFontLoader, a method that boosts performance by optimizing font loading behavior.

Step 1 — Set Up the Functions in functions.php

We’ll start by adding the necessary code to the functions.php file of your WordPress theme.

1. Enqueue Adobe Fonts in the Block Editor

To integrate the fonts into the WordPress block editor, enqueue the Adobe Fonts stylesheet in your theme’s functions.php file. This allows you to preview the custom fonts directly in the block editor.

<?php
/**
 * Setup theme.
 */
function theme_setup(): void {

    // Enqueue Adobe Fonts for the block editor.
    add_action( 'enqueue_block_editor_assets', function () {
        wp_enqueue_style( 'custom-fonts', 'https://use.typekit.net/yourkitid.css', [], wp_get_theme()->get( 'Version' ) );
    } );
}

add_action( 'after_setup_theme', 'theme_setup' );

Replace yourkitid with your actual Adobe Fonts project ID. This ensures that the fonts are loaded in the editor, giving you a real-time preview.

2. Load Adobe Fonts Asynchronously with WebFontLoader

Loading fonts synchronously can block rendering and cause performance issues. To avoid this, we can load the fonts asynchronously using Google’s WebFontLoader. This method ensures that your fonts are loaded only when needed, improving your page speed.

Here’s how to add the WebFontLoader:

/**
 * Load Adobe Fonts asynchronously with WebFontLoader.
 * 
 * @return void
 */
function load_typekit_fonts() {
    ?>
    <script>
        WebFontConfig = {
            typekit: {id: 'yourkitid'},
            active: function () {
                document.documentElement.className += " wf-active";
                document.documentElement.classList.remove("wf-loading");
            },
            inactive: function () {
                document.documentElement.className += " wf-inactive";
                document.documentElement.classList.remove("wf-loading");
            }
        };

        (function (d) {
            const wf = d.createElement('script'), s = d.scripts[0];
            wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
            wf.async = true;
            s.parentNode.insertBefore(wf, s);
        })(document);
    </script>
    <?php
}

add_action( 'wp_head', 'load_typekit_fonts' );

This script will load your Adobe Fonts asynchronously, meaning the rest of your page will continue loading while the fonts are being fetched. Once the fonts are available, they’ll be applied to your content without delaying other page elements.

3. Add a Loading Class to Improve User Experience

To prevent Flash of Unstyled Text (FOUT), you can add a class to your document when the fonts are loading and remove it once they’re applied. This provides a smoother user experience.

/**
 * Add a webfontloader class to the body tag on page load.
 * @return void
 */
function add_body_class_onload() {
    ?>
    <script>
        document.documentElement.className += " wf-loading";
    </script>
    <?php
}

add_action( 'wp_head', 'add_body_class_onload', 1 );

This script adds a wf-loading class while the fonts are being loaded, and replaces it with wf-active when the fonts are ready. This ensures that your content doesn’t flicker as the custom fonts are applied.

Step 2 — Optimize Font Loading with Fallback Fonts

While loading Adobe Fonts asynchronously improves performance, it’s always a good idea to define fallback fonts in your CSS. This helps to avoid content flashes while the custom fonts are being fetched. For example:

body {
    font-family: "Custom Adobe Font", Arial, sans-serif;
}

By specifying fallback fonts, you ensure that visitors see a readable font while the Adobe Fonts are loading.

Step 3: Monitor and Improve Performance

After implementing Adobe Fonts, it’s important to monitor your site’s performance to ensure that the fonts aren’t negatively impacting your loading times. You can use tools like Google PageSpeed Insights or GTmetrix to analyze your page load performance and see if further optimizations are needed.

Conclusion

Incorporating Adobe Fonts into your WordPress site doesn’t have to come at the cost of performance. By leveraging asynchronous font loading with WebFontLoader, you can maintain a fast, responsive website while still showcasing beautiful custom fonts.