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; }