Replace italic figure sample word

[davelab6]

The italic figure sample word is Good but this doesn't have an a or g in it, which the text explicitly mentions, so the sample word should be updated

[jpamental]

This is harder than it seems. I'm having trouble finding an open-source VF where a single font file contains upright and italic, and responds properly to the 'ital' axis being set. Separate files don't work as the browser doesn't download the italic one if it's not called. I've replaced it with Literata and separate files, but this is really not ideal as it's using syntax that only works with separate files.

I'm going to have to rewrite the content a little bit to talk about separate vs combined VF files as they behave and are supported completely differently right now.

[jpamental]

(it is worth doing, but still a bummer. I should have thought this one through better)

Also, will need a nice fancy Material toggle like on Optical Size (auto). Hoping that @kennethormandy can help with that.

[jpamental]

OK - I've updated the copy and added both demos to showcase the different strategies for combined or separate upright/italic VF files. Just needs toggles instead of the current widgets.

[jpamental]

Reassigning this one to @kennethormandy to add MD toggle component instead of radio buttons (same as on opsz component)

[davelab6]

Thanks Jason!

I'm having trouble finding an open-source VF where a single font file contains upright and italic, and responds properly to the 'ital' axis being set.

Are there any non-libre fonts that respond properly?

Separate files don't work as the browser doesn't download the italic one if it's not called.

I'm not entirely sure what you mean... if they are separate files, then there is no ital axis, there is just a pairing of roman and italic files into a single family via name or STAT table metadata on desktops and via matching font-family values within @font-face stanzas in CSS; and the VF family works the same as a static family.

I'm going to have to rewrite the content a little bit to talk about separate vs combined VF files as they behave and are supported completely differently right now.

I wonder if there is a different way of explaining this that explains ital and slnt together as one topic - eg, emphasis, per the association with HTML <em> tags. The first two 'expressive' variable font projects that Google Fonts team highlighted at the ATypI 2019 presentation were Recursive and Fraunces, and Recursive has both slnt and ital, and Fraunces has 2 separate files for roman and italic. I think using those as examples would be ideal, as they will be soon available in the API.

I also wonder if its worth discussing the other details in https://www.w3.org/TR/css-fonts-4/#font-style-prop, or just linking out to that page to learn more... I see https://www.w3.org/TR/css-fonts-3/#font-style-prop doesn't deal with VF at all, and (afaik) css-fonts-4 is not yet at the Recommendation stage... but I am fuzzy on the way CSS is evolving these days.

[jpamental]

I already rewrote the content to include talking about a single VF file with an ital axis or separate upright and ital, so that part's covered.

But I think I may have found a hole in the implementation of how browsers are dealing with the separate files and custom properties. I'm not certain it's a bug, but it's definitely a problem.

If you have both files included in your @font-face rules, but are assigning font-style with a CSS custom property, changing the value of that custom property does not trigger the font download. I need to do more research on this one, but it's definitely an issue.

Anyway I think this section is in good shape short of having a Material 'switch' instead of a radio button.