Next.js Discord

Discord Forum

What does { display: "swap" } do in Next.js font declarations?

Answered
Asian paper wasp posted this in #help-forum
Open in Discord
Asian paper waspOP
export const raleway = Raleway({
    subsets: ["latin"],
    display: "swap",
    variable: "--font-Raleway",
});


Title.
Answered by Arinji
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display#swap
View full answer

14 Replies

Answer
Arinji
@Asian paper wasp
btw the explanation mentions swap period
If the font face is not loaded, any element attempting to use it must render a fallback font face
^^ this is swap period
Asian paper waspOP
Hmm it's a CSS thing rather than Next.js
Thank you! @Arinji
@Asian paper wasp Hmm it's a CSS thing rather than Next.js
Arinji
no worries, mark an answer if it solved your question
Original message was deleted
Arinji
bop
thanks :D
Asian paper waspOP
Haha I didn't realise the explanation :D
Was looking for it
Arinji
No worries, most people miss it
hello world :D
Asian paper waspOP
Nice