Dynamically load fonts

I’ve added a Dyslexia accessibility feature to my website which loads a Dyslexia-friendly font, woo!

This involved creating a small toggle function to turn the feature on and off, but when I reload the page it’s gone, so I had it bake a cookie so the function could trigger automatically on-reload. This still wasn’t enough I didn’t want every visitor to load the font, only users who click the toggle button, so I added a section to dynamically load the font.

A last bit of work to do as there was a flash of unstyled text on-load, this is because the function was run after the page was finished loading, it is possible to run scripts before the page is fully loaded, now the flash was brief enough to ignore.

A new Javascript feature I used was:

if (["interactive", "complete"].includes(document.readyState)) {
        // do things
    } else {
        document.addEventListener('DOMContentLoaded', function() {
            // do things
        });
   }
}

Pages go through readyStates loading, interactive and finish in complete. The interactive state means there are assets still loading but we can do things like addEventListener.