setting local font
Answered
Cape lion posted this in #help-forum
Cape lionOP
Is there a way to add two paths similar to this
import localFont from "next/font/local";
export const gotham = localFont({
variable: "--font-gotham",
src: [
{
path: ["./Gotham-Book.woff2","./Gotham-Book.woff"],
weight: "400",
style: "normal",
},
{
path: "./Gotham-Medium.woff2",
weight: "500",
style: "normal",
},
{
path: "./Gotham-Bold.woff2",
weight: "700",
style: "normal",
},
],
});Answered by joulev
You should try not using next/font and just manually self-host, if it works then nextjs is buggy, if it doesn’t then your font file is buggy and you should use a different file or font
8 Replies
@Cape lion Is there a way to add two paths similar to this
`import localFont from "next/font/local";
export const gotham = localFont({
variable: "--font-gotham",
src: [
{
path: ["./Gotham-Book.woff2","./Gotham-Book.woff"],
weight: "400",
style: "normal",
},
{
path: "./Gotham-Medium.woff2",
weight: "500",
style: "normal",
},
{
path: "./Gotham-Bold.woff2",
weight: "700",
style: "normal",
},
],
});`
uhm no, and no need. just give it the woff2 file and next will take care of the rest
@joulev uhm no, and no need. just give it the woff2 file and next will take care of the rest
Cape lionOP
I did this, but I got some issues viewing it on iPhone 12.
The font kept clipping there, it was not happening on the rest only iPhone 12
@Cape lion The font kept clipping there, it was not happening on the rest only iPhone 12
Clipping as in rendered incorrectly?
Perhaps either your font file is buggy or nextjs’s font optimiser is buggy
You should try not using next/font and just manually self-host, if it works then nextjs is buggy, if it doesn’t then your font file is buggy and you should use a different file or font
Answer
Iirc nextjs doesnt require it to be a woff2, can try other font formats