javascriptwoffwoff2font-feature-settings

Detect variable font support with javascript

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?

Solution

  • 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.