Next.js Discord

Discord Forum

Font not loading/applying on redirect() when using 'next/font/google'

Answered
Large Münsterländer posted this in #help-forum
Open in Discord
Large MünsterländerOP
I have an app that has 2 layouts, one at the root with a very basic layout that just passes through a font loaded via 'next/font/google', and another layout that sits inside and holds everything apart from the homepage.

The issue I am having is when I sign a user out and perform a redirect() to "/", the font used on the homepage via the basic layout does not load or at least not applying.

Using Tailwind + DaisyUI and Supabase as components of the app, but here are the two layouts:

layout.tsx at the root for the homepage:
import "./globals.css";
import { Luckiest_Guy } from "next/font/google";

const luckiestGuy = Luckiest_Guy({
  display: "swap",
  weight: "400",
  preload: true,
  subsets: ["latin"]
});

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={luckiestGuy.className}>
      <body className="bg-background text-foreground">{children}</body>
    </html>
  );
}


layout.tsx for (authenticated) when the user logs in on the homepage:
import Navbar from "@/components/Navbar";
import Sidebar from "@/components/Sidebar";

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="bg-background text-foreground">
        <main className="flex min-h-screen columns-2">
          <div className="w-64 flex-none">
            <Sidebar />
          </div>
          <div className="w-full">
            <div className="h-32">
              <Navbar />
            </div>
            <div className="mx-8 mt-4">{children}</div>
          </div>
        </main>
      </body>
    </html>
  );
}


When I first load the homepage I get the button with full styling as expected as shown in image 2.

Then when I press it and proceed to the main part of the app under /home, I press the "Sign Out" button that performs a redirect("/") and it kicks me back to the front page, but the font is not applied to the button as shown in image 1.

I'm not sure if I'm missing something, does anyone have any ideas what's wrong with this?
Answered by Large Münsterländer
Hi @joulev, thanks for looking at this. I ran into an error when importing the globals twice but I managed to resolve this issue by removing the second set of <html> and <body> tags from the (authenticated) layout, I guess Next doesn't like having nested html tags or something? after removing those tags the button keeps the styling when logging out as expected.
View full answer

5 Replies

Large MünsterländerOP
Hi guys, just checking in to see if anyone else has had this issue?
@Large Münsterländer I have an app that has 2 layouts, one at the root with a very basic layout that just passes through a font loaded via 'next/font/google', and another layout that sits inside and holds everything apart from the homepage. The issue I am having is when I sign a user out and perform a redirect() to "/", the font used on the homepage via the basic layout does not load or at least not applying. Using Tailwind + DaisyUI and Supabase as components of the app, but here are the two layouts: layout.tsx at the root for the homepage: typescript import "./globals.css"; import { Luckiest_Guy } from "next/font/google"; const luckiestGuy = Luckiest_Guy({ display: "swap", weight: "400", preload: true, subsets: ["latin"] }); export default async function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en" className={luckiestGuy.className}> <body className="bg-background text-foreground">{children}</body> </html> ); } layout.tsx for (authenticated) when the user logs in on the homepage: typescript import Navbar from "@/components/Navbar"; import Sidebar from "@/components/Sidebar"; export default async function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body className="bg-background text-foreground"> <main className="flex min-h-screen columns-2"> <div className="w-64 flex-none"> <Sidebar /> </div> <div className="w-full"> <div className="h-32"> <Navbar /> </div> <div className="mx-8 mt-4">{children}</div> </div> </main> </body> </html> ); } When I first load the homepage I get the button with full styling as expected as shown in image 2. Then when I press it and proceed to the main part of the app under /home, I press the "Sign Out" button that performs a redirect("/") and it kicks me back to the front page, but the font is not applied to the button as shown in image 1. I'm not sure if I'm missing something, does anyone have any ideas what's wrong with this?
joulev
you have two separate root layouts so you must import the global css and the font to both places
my recommendation would be to only have one root layout, however. it makes things easier that way.

a root layout is a layout that doesn't have any parent layouts.
Large MünsterländerOP
Hi @joulev, thanks for looking at this. I ran into an error when importing the globals twice but I managed to resolve this issue by removing the second set of <html> and <body> tags from the (authenticated) layout, I guess Next doesn't like having nested html tags or something? after removing those tags the button keeps the styling when logging out as expected.
Answer