CODEWITHSUNDEEP
cssfontstailwind-csstailwind-css-4
Screensavers
Screensavers

Reputation: 34

@import Google font doesn't work in Tailwind v4 on a new Next.js 15 project

Following the instructions on this page, I was able to set up a custom font class in Tailwind 4. However, when I tried to load a Google font using the import syntax, the font doesn't seem to load and there are no corresponding network request in my browser tab that fetches that font from Google's URL.

@import url("https://fonts.googleapis.com/css2?family=Rubik+Bubbles&display=swap");
@import "tailwindcss";

@theme {
  --font-hello: Rubik Bubbles, "sans-serif";
}

The intended outcome was to get the Google font to load as demonstrated in the docs.

Upvotes: -1

Views: 65

Answers (1)

Screensavers
Screensavers

Reputation: 34

I looked closer at the docs and this line caught my eye:

If you're loading a font from a service like Google Fonts, make sure to put the @import at the very top of your CSS file:

I inspected the compiled CSS in the browser, and turns out the @import url line was not at the top of the compiled CSS. There were some @font-face lines before that.

screenshot showing @import line being preceded by other CSS code

Geist is of course the default font that comes with every Next.js install. I determined that to load a custom font, I could either load all of my Google fonts using next/font/google or the Tailwind way (i.e. don't mix methods). I chose the latter and the font now loads as intended.

Specifically I removed these lines to get the @import in my CSS working:

modified   src/app/layout.tsx

@@ -1,17 +1,6 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -24,11 +13,7 @@
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
+      <body className={`antialiased`}>{children}</body>
     </html>
   );
 }

Upvotes: 0

Related Questions