font declarations next/font localFont

Question

Hi all, I am facing the issue that font declarations are not respected. I load a custom font like so:const fontBrand = localFont({
  src: [
    {
      path: '../app/fonts/InterVariable.woff2',
      weight: '100 900',
      style: 'normal',
    },
    {
      path: '../app/fonts/InterVariable-Italic.woff2',
      weight: '100 900',
      style: 'italic',
    },
  ],
  declarations: [{ prop: 'ascent-override', value: '94%' }, { prop: 'size-adjust', value: '105%' }],
  display: 'swap',
  variable: '--font-brand',
})Instead of what the generated css is showing is:@font-face {
    font-family: '__fontBrand_60a44d';
    src: url('../app/fonts/InterVariable.woff2') format('woff2');
    font-display: swap;
    font-weight: 100 900;
    font-style: normal;
}
â€¦

@font-face {
    font-family: '__fontBrand_Fallback_60a44d';
    src: local("Arial");
    ascent-override: 89.79%;
descent-override: 22.36%;
line-gap-override: 0.00%;
size-adjust: 107.89%;

}

.className {
    font-family: '__fontBrand_60a44d', '__fontBrand_Fallback_60a44d';
    
}
.variable {
    --font-brand: '__fontBrand_60a44d', '__fontBrand_Fallback_60a44d';
}None of my declarations are respected. The applied fallback font by next is arial and those automatically set overrides are not correct either.

font declarations next/font localFont

0 Replies