w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.42k stars 652 forks source link

[css-fonts] Support avar2 within tech() to support using the next generation of variable fonts tech #10599

Open davelab6 opened 1 month ago

davelab6 commented 1 month ago

https://web.dev/articles/variable-fonts#loading_variable_font_files gives this CSS example for loading Roboto Flex, an advanced variable font:

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

However, a new version is under development, https://github.com/googlefonts/roboto-flex-avar2 , and this uses the new avar v2 table instead of the current v1 one, as pioneered in https://github.com/harfbuzz/boring-expansion-spec and can be inspected and authored with https://lorp.github.io/fencer/src/fencer.html

Therefore I would like to be able to do this in my CSS

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF-avar2.woff2') format('woff2-variations-avar2');
    src: url('RobotoFlex-VF-avar2.woff2') format('woff2') tech('variations-avar2');
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

@lorp @simoncozens @twardoch

svgeesus commented 1 month ago

@jfkthame @drott

Lorp commented 1 month ago

Yes please

drott commented 1 month ago

I would be in favor of adding avar2 to the <font-tech> production in https://drafts.csswg.org/css-fonts/#font-face-src-parsing

Then the example would work with src: url('RobotoFlex-VF-avar2.woff2') format(woff2) tech(avar2) or src: url('RobotoFlex-VF-avar2.woff2') format(woff2) tech(variations,avar2)