Skip to main content
Dublin Library

The Publishing Project

Inline scripts in WordPress


There are times when we need to add scripts to the page that will run only when there is a script already enqueued and loaded before it happens.

I got bit by this when trying to use FontFaceObserver. For some reason, it worked fine in development but it would give a FontFaceObserver is not defined error when I moved the theme to production.

The solution was hidden in some older documentation. As of version 4.5 there is an additional script loading function for loading inline scripts: wp_add_inline_script. This function allows adding inline scripts that depend on scripts

The only important thing to remember is that this will only work when using a script that was enqueued using wp_enqueue_script.

The final solution looks like this:

function rivendellweb_enqueue_fontfaceobserver() {
  wp_enqueue_script( 'ffo_script',
    get_stylesheet_directory_uri() . '/js/fontfaceobserver.js',
    false );

   wp_add_inline_script( 'ffo_script', 'const recursive = new FontFaceObserver("Recursive VF");let html = document.documentElement;
     Promise.all([recursive.load()]).then(() => {sessionStorage.fontsLoaded = true;console.log("Recursive has loaded.");
     }).catch((err) => {sessionStorage.fontsLoaded = false;console.log("Recursive failed to load", err);

     // Add a class based on whether the font loaded successfully
     if (sessionStorage.fontsLoaded) {html.classList.add("fonts-loaded");
     } else {html.classList.add("fonts-failed");}'

add_action( 'wp_enqueue_scripts', 'rivendellweb_enqueue_fontfaceobserver' );

Edit on Github