vercel
@next/font + font-feature-settings do not work with [email protected]
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
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>
);
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.
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.
