Variable font examples can't download font (CORS error)

[wbamberg]

Loading https://developer.mozilla.org/en-US/docs/Web/CSS/font-style, https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight, or https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch, I see console errors like:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf. (Reason: CORS header “Access-Control-Allow-Origin” missing).

In the font-style page this completely breaks the example at https://developer.mozilla.org/en-US/docs/Web/CSS/font-style#variable_fonts .

In font-weight this partially breaks the example at https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#variable_fonts (because the fallback font is a little variable, I guess).

In the font-stretch page the live sample is broken: https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch#setting_font_stretch_percentages.

[rachelandrew]

This relates to: #4209

It keeps coming up, I'll prioritize moving them. It doesn't take a huge amount of time, it's just not very exciting :D

[peterbe]

This is actually a bit tricky. Yari only supports images as file attachments.
I have a draft of a solution but not enough time to perfect the PR. If anybody on the content side is willing to help out testing it we can probably solve this.

[wbamberg]

If anybody on the content side is willing to help out testing it we can probably solve this.

I'm totally happy to help out. Thanks @peterbe !