Use local fonts for font-variant-alternates

[wbamberg]

Update https://developer.mozilla.org/en-US/docs/web/css/font-variant-alternates to use a local font, so we can make a live sample work.

This should be possible now mdn/yari#7605 has landed.

Updates #21597.

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/font-variant-alternates

(comment last updated: 2023-06-08 15:26:24)

[caugner]

@wbamberg We only support woff2, not woff. Can we use the woff2 version of MonteCarlo?

[wbamberg]

It works! Thank you @caugner ! @Elchi3 , we have a live sample for font-variant-alternates now!

[dipikabh]

Thank you 👍

[drott]

@wbamberg , thanks very much for following up, great to see this working in the preview link! https://pr27206.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/font-variant-alternates - Out of curiosity: when does this roll to public MDN?

[caugner]

when does this roll to public MDN?

MDN is deployed every night between 0am and 1am UTC.

[wbamberg]

It looks like the page is live, but the font loading is not working:

[caugner]

@wbamberg I looked into it and the reason it doesn't work is that the filename is not lowercase. The filecheck command catches this, but content's pr-test.yml workflow hasn't been updated yet to account for the newly supported file extensions:

content/.github/workflows/pr-test.yml

Line 49 in c754ecf

GIT_DIFF_FILES=$(echo "${DIFF_DOCUMENTS}" | egrep -i "^files/.*\.(png|jpeg|jpg|gif|svg|webp)$" | xargs)

Rather than adding extensions, I would suggest to run the filecheck on all non-Markdown files. The command supports this since mdn/yari#7716.

[wbamberg]

Ah, thank you for the investigation, @caugner ! -> #27277

[wbamberg]

@drott , am I right in thinking that in the CSS for the example:

.variant {
  font-feature-settings: "swsh" 1;
  font-variant-alternates: swash(fancy);
}

...the first part font-feature-settings: "swsh" 1; is not needed: that in fact the two lines are alternative ways of doing the same thing, and the point of font-variant-alternates is that it offers a less low-level way to do it, and should be preferred (as described in the first paragraph of https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings#syntax, after the example)?

So we should remove the first line from this example?

[wbamberg]

Or even, include both versions, but in different rules:

.variant1 {
  font-feature-settings: "swsh" 1;
}

.variant2 {
  font-variant-alternates: swash(fancy);
}

[drott]

...the first part font-feature-settings: "swsh" 1; is not needed:

Yes, these are two syntaxes for the same thing. font-variant-alternates inherits more in line with CSS (font-feature-settings gets overriden by child rules) and is perhaps more ergonomic to use. But the result is the same.

Showing both, describing font-feature-settings as a lower level alternative would be an option, but that's up to what you as authors feel should be in MDN.