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?

kontur · Accepted Answer · 2019-06-17 14:23:20Z

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.

answered Jun 17, 2019 at 14:23

kontur

5,2752 gold badges41 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

oldboy Over a year ago

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?

kontur Over a year ago

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

oldboy Over a year ago

that is fine for my use case. i will google opentype.js.org?

kontur Over a year ago

https://opentype.js.org/

Collectives™ on Stack Overflow

Detect variable font support with javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related