B
Bryan Lee Min Yuan
When using a font family with multiple files for each font weight and style, the CSS rules generated for the web export is incorrect and does not properly define the font family.
Given a single font family (e.g. "Wix Madefor Text") with multiple files (e.g. "fonts/WixMadeforText-Regular.woff2", "fonts/WixMadeforText-Italic.woff2", "fonts/WixMadeforText-Bold.woff2"), we should be able to define a config for
useFonts
as:
useFonts([
{
fontFamily: "Wix Madefor Text",
fontDefinitions: [
{
path: require("@/assets/fonts/WixMadeforText-Regular.woff2"),
},
{
path: require("@/assets/fonts/WixMadeforText-Italic.woff2"),
style: "italic",
},
{
path: require("@/assets/fonts/WixMadeforText-Bold.woff2"),
weight: 800,
},
]
}
])
The CSS should generate as:
@font-face {
font-family: 'Wix Madefor Text';
src: url("fonts/WixMadeforText-Regular.woff2");
font-display: auto;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Wix Madefor Text';
src: url("fonts/WixMadeforText-Italic.woff2");
font-display: auto;
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Wix Madefor Text';
src: url("fonts/WixMadeforText-Bold.woff2");
font-display: auto;
font-weight: 700;
font-style: normal;
}