Next.js Discord

Discord Forum

Fonts are not being changed in localhost.

Answered
Tan posted this in #help-forum
Open in Discord
TanOP
I had smilar issue with my previous project also. In web it performed as intended(I am not sure about this one). But in localhost the font look like this :

Here is my code snippet.

import "./globals.css";
import type { Metadata } from "next";
import { Poppins } from "next/font/google";

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800"],
  style: ["normal", "italic"],
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={poppins.className}>{children}</body>
    </html>
  );
}

What might be the problem. I tried clearing .next/cache but not working.
Answered by @ts-ignore
nextjs doesn't work with bun
View full answer

9 Replies

@@ts-ignore add `display:"swap"`
TanOP
where ?
@Tan where ?
@ts-ignore
in Poppins({...})
@@ts-ignore in `Poppins({...})`
TanOP
It doesn't seem working :
And I am also being bombarded with these error : 
AbortError: The user aborted a request.
    at abort (/home/linux/Developer/virtual_crypto_trading/node_modules/next/dist/compiled/node-fetch/index.js:1:65190)
    at EventTarget.abortAndFinalize (/home/linux/Developer/virtual_crypto_trading/node_modules/next/dist/compiled/node-fetch/index.js:1:65410)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:807:20)
    at EventTarget.dispatchEvent (node:internal/event_target:742:26)
    at abortSignal (node:internal/abort_controller:369:10)
    at AbortController.abort (node:internal/abort_controller:391:5)
    at Timeout.<anonymous> (/home/linux/Developer/virtual_crypto_trading/node_modules/next/dist/compiled/@next/font/dist/google/fetch-font-file.js:24:51)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  type: 'aborted'
}
@@ts-ignore what's your node version?
TanOP
I was using bun
@Tan I was using bun
@ts-ignore
nextjs doesn't work with bun
Answer
@ts-ignore
you can use it as package manager but not runtime
@@ts-ignore nextjs doesn't work with bun
TanOP
Noted.