Skip to content

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

@davelab6

Description

@davelab6

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions