Open loick opened 1 year ago
Just to bump this. Ideally the src array element should also support a set of file paths for fonts (with different) formats, instead of a single path. Something along the lines of:
src: [
{
paths: [
'../../public/fonts/CeraPro/Cera-Pro-Regular.woff',
'../../public/fonts/CeraPro/Cera-Pro-Regular.woff2'
],
weight: '400',
style: 'normal',
},
{
path: '../../public/fonts/CeraPro/Cera-Pro-Medium.woff',
weight: '500',
style: 'normal',
},
{
path: '../../public/fonts/CeraPro/Cera-Pro-Bold.woff',
weight: '700',
style: 'normal',
},
],
It would also be nice if we could configure "preload" individually instead of for the whole group.
+1-ing @joaopbnogueira feedback. I'm having the same issue where my pages may only use one or two weights per page, and not having to include all the others would be great. It's getting to a point in performance where I am debating removing all fonts from my project except one.
+1, Also I'd suggest to have declarations
per item ..
since currently it's impossible to combine fonts using current api.
src: [
{
path: [
'../../public/fonts/CeraPro/Cera-Pro-Regular.woff',
'../../public/fonts/CeraPro/Cera-Pro-Regular.woff2',
],
weight: '100',
style: 'normal',
declarations: [
{
prop: 'unicode-range',
value:
'U+0600–U+06FF',
},
],
preload: false,
},
{
path: ['../../public/fonts/CeraPro/Cera-Pro-Medium.woff'],
weight: '100',
style: 'normal',
declarations: [
{
prop: 'unicode-range',
value: 'U+2d, U+3d',
},
],
preload: false,
},
{
paths: ['../../public/fonts/CeraPro/Cera-Pro-Bold.woff'],
weight: '100',
style: 'normal',
},
]
+1, Also I'd suggest to have
declarations
per item .. since currently it's impossible to combine fonts using current api.
Yes, this is something I'd really like to see added. I'm currently struggling to do proper font subsetting for local fonts, since there's no explicit documentation on next.js regarding specifying subsets for locally-loaded fonts (that have been modified via pyftsubset
). Having per-src declarations would allow for this:
const font = localFont({
src: [
{
path: "./fonts/my-font-latin.woff2",
declarations: [{ prop: "unicode-range", value: "U+0000-00FF" }]
},
// other subsets if required to fill U+0100-2FFF
{
path: "./fonts/my-font-cjk.woff2",
declarations: [{ prop: "unicode-range", value: "U+3000-FFFF" }]
},
]
});
Resulting in:
@font-face {
unicode-range: U+0000-00FF;
font-family: '__font_028742'; /* Same font family as below */
src: url(/_next/static/media/76abc2201fd876fb-s.p.woff2) format('woff2');
font-display: swap;
}
@font-face {
unicode-range: U+3000-FFFF;
font-family: '__font_028742'; /* Same font family as above */
src: url(/_next/static/media/1e91e29b5a5efa96-s.p.woff2) format('woff2');
font-display: swap;
}
Are there any updates on this bug/feature request? I can pick this up
Looking forward for a solution. I also need to load multiple file formats for the same font.
guys, I implemented the draft.
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
Font optimization (next/font)
Link to the code that reproduces this issue
/
To Reproduce
Hi everyone,
I'm using
next/font
on my app in order to load some local fonts I have in my public directory. I used this documentation for this: https://nextjs.org/docs/basic-features/font-optimization#local-fontsThis is the piece of code, loading the fonts:
Nothing fancy, the only particularity is the font extension, as you can see I'm trying to load woff & woff2 fonts.
Since I'm using Tailwind btw, I'm adding the fonts like this in my component:
Describe the Bug
As you can see here, with this setup, all of the fonts are loaded. The woff and the woff2.
Maybe I missed something, but do you know how I could only make the browser load the right font (woff2) and loading the other one (woff) as a fallback? When I read the doc, the
fallback
key only supports the system-ui fonts.Thanks!
Expected Behavior
Only the woff2 should be loaded in the browser, not the woff version of the font.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
Vercel