Detect variable font support with javascript

Question

I am aware of woff2 detection and also the css based @supports variable font support detection, but is there a way to detect variable font support purely in Javascript?

Answer 1

This is the code I ended up am using now:

function variableFonts() {
    if ("CSS" in window === false || "supports" in CSS === false) {
        return false
    }

    return CSS.supports("(font-variation-settings: normal)")
}

First checking for the javascript CSS & supports API — which incidentally old browsers not supporting variable fonts also lack support for. Then, using CSS.supports to check if setting font variations is supported is trivial.