0

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?

kontur
  • 4,934
  • 2
  • 36
  • 62

1 Answers1

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.

kontur
  • 4,934
  • 2
  • 36
  • 62
  • do you know how to determine each manipulatable characteristic (or each value of `font-variation-settings`) that can be used on any given variable font? – oldboy Mar 05 '22 at 04:49
  • @oldboy it's not possible with CSS; with something like opentype.js you could parse the font and find the axes and their extrama, but that is not very practical. in most cases the developer knows what those are. – kontur Mar 06 '22 at 20:34
  • that is fine for my use case. i will google opentype.js.org? – oldboy Mar 07 '22 at 21:34
  • [https://opentype.js.org/](https://opentype.js.org/) – kontur Mar 24 '22 at 14:20