@next/font + font-feature-settings do not work with next@13.2.4

jbowa commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

❯ npx --no-install next info

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.0.0
      npm: 7.10.0
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.26
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Font optimization (@next/font)

Link to the code that reproduces this issue

private repo but is easy to reproduce

To Reproduce

Setup appDir with RSC and stitchesjs.

Describe the Bug

Font features do not appear to be working when used with @next/font.

Given the following

export const Inter = InterFont({
    subsets: ['latin'],
    display: 'swap',
});

and

body: {
        fontSize: '$fontSize$14',
        fontFamily: `${Inter.style.fontFamily},  -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"`,
        fontFeatureSettings: 'ss01',
        WebkitFontSmoothing: 'antialiased',

I expect ss01 to work font the Inter font.

Expected Behavior

Expect ss01 to be added to fontfeatures. This works when the font is installed natively or locally.

Which browser are you using? (if relevant)

firefox

How are you deploying your application? (if relevant)

No response

kelvinsekx commented 1 year ago

I am facing this same bug

gthibaud commented 7 months ago

Hello, the reason is that fonts in next/fonts are provided by Google Fonts (https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts), and Google Font hosts an outdated version of Inter that does not support variable font:

"Should I use Inter from Google Fonts? No, unless you have no other choice. (outdated, no italics)". (quote from the homepage of Inter Github repo)

The best solution is to download Inter source font and include it as a local font in your project.

Here is a working example:

const interVariable = localFont({
    display: 'swap',
    src: [
        {
            path: './InterVariable-Italic.woff2',
            style: 'italic',
        },
        {
            path: './InterVariable.woff2',
            style: 'normal',
        }]
});

..... 

return (
    <html lang="fr" className={`${interVariable.className} .....other local fonts`}>
            ....
    </html>
);

prodkt commented 5 months ago

Finding zero solution for using fontFeatureSettings with nextJS. It just doesn't seem to be supported. Issue lies in the restrictions of next/font/local declarations as it takes key/value pairs.

e.g declarations: [{ prop: "font-feature-settings", value: "ss03" }] although to use the font-feature you than need to specify it on or off. declarations: [{ prop: "font-feature-settings", value: "ss03" "on" }] declarations: [{ prop: "font-feature-settings", value: "ss03 on" }] declarations: [{ prop: "ss03", value: "on" }]

None of which work.

If you try this with TailwindCSS alternatively with Nextjs to apply the font feature settings it also is a non-starter as Nextjs somehow ignores the setting in tailwindCSS where outside of nextjs it works perfectly fine

fontFamily: { sans: [ 'var(--font-sans)', { fontFeatureSettings: '"ss03", "on"', }, ], },

This would typically work, but in Nextjs does not.

If you try the way the comment above me suggestions you'll find that src only accepts 3 values on its prop

(property) src: string | { path: string; weight?: string | undefined; style?: string | undefined; }[]

Thus the following won't work either...

src: [ { path: './fonts/CircularStd/CircularStd-Book.woff2', style: 'normal', fontFeatureSettings: '"ss03", "on"', }, { path: './fonts/CircularStd/CircularStd-BookItalic.woff2', style: 'italic', }],

At a hardstop with this one as that fontSetting is very true to this brand and there doesn't appear this extensibility available for fonts with Nextjs at this time.

leje512 commented 3 months ago

Did you already find a solution for this? Working with Inter and trying to apply font-feature-settings: "zero" 1, "cv02" 1. I noticed that it does work in Firefox and not in Chrome. Other values such as ascent-override worked in both browsers and font-variant-numeric in none of these.

Edit: working with a local-font, so I expected these to work the same in different browsers.

Vito-Ethan commented 3 weeks ago

I had a similar issue that @leje512 had with the font-feature-settings working in firefox and not chrome. I found two solutions, applying the font-feature-settings in css * { font-feature-settings: "ss01" 1; } (I read this is not a great solution as it will add this style to all html elements regardless if they use it or not, however I could not find a different fix) or using inline styles on the elements that I wanted to use this setting on style={ { fontFeatureSettings: '"ss01" 1' } }.

vercel / next.js