Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Though params refer to variable font grade, script changes font weight

See original GitHub issue

Just noticed: the code that handles setting the variable grade in PR #25 uses the font-variation-settings with the "wght" flag:

https://github.com/glyphic-co/textblock/blob/934cf16a77f336710d8102bf374c118a2ac87a1e/src/textblock.js#L52-L53

This is based on the current 0.9.9 code:

https://github.com/glyphic-co/textblock/blob/567a0e3354f8c02469f2dc7c5f7c9f041a341f3e/src/textblock.js#L56

I’m new to variable fonts, but based on MDN’s Variable Font Guide, it looks like font grade is specified not using the "wght" flag but rather the "GRAD" flag (capitalized because grade is a (less common) custom variation axis, unlike weight, which is a (more commonly used) registered axis).

The font used in demo.html, Source Sans Variable - Roman, contains only the weight variation axis. So perhaps the parameter names should be changed from min/maxWidthVariableGrade to min/maxWidthFontWeight? The Variable part could be dropped, since both variable and non-variable fonts’ weights can be set using just the font-weight CSS property (non-variable fonts will just round to the nearest available weight); the font-variation-settings property that only works with variable fonts wouldn’t need to be used.

The VariableGrade params could be retained in addition to FontWeight params, and the code could be updated accordingly, though a variable font with a grade axis should be used to demonstrate it.