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
👍 React with 👍 2Lorp and yisibl