variable fonts with weight axis shouldn't override page weights by default

[thundernixon]

One of the big benefits of this tool is in allowing a variable font to apply to the existing font weights of a page. For instance, the GitHub UI has a nice mix of regular, semibold, and bold fonts. It's very useful to see how a variable font works with that, so that a type designer can understand whether their 700 really feels like a 700, whether their 600 feels like a 600, etc.

In the default setup, this can be achieved in a "dumb" way by adding font-weight: 100-900 to the inserted CSS in background.js:

(Interestingly, the actual wght range of the current Recursive betas is 300–1100, which doesn't align to the CSS, but it seems to work well enough, anyway... the published version of Recursive will be 300–900, if that's useful information).

I do realize that this feature may be contingent on setting up JS to detect a font's axes, etc. I just wanted to file an issue to say that this is more important than overall UI polish, as it's something I don't know how to approach myself but one of the most useful parts of the tool.

[RoelN]

The Recursive packed with the extension will work the same way as a custom font. So we could use the css field in recursive-fonts.js to add this specific line.

If the user then wants to use a font with a different font-weight declaration, they can do it and not get Recursive's CSS hardcoded.

(NOTE: the current CSS would be added to the selectors, as in the screenshot above: font.css. We should introduce font.fontfacecss specifically for this situation!)

[thundernixon]

We should introduce font.fontfacecss specifically for this situation

That's a solid idea!

I've added a font-face portion to the latest UI design mockups at https://github.com/kabisa/recursive-extension/issues/25.