[v4][Nextjs] Import google font in global.css is broken when deployed on Production.

[khoatran2014]

Sorry because the google font is broken after go to Production. On dev is fine in this case.

V3: Global.css just like this.
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

@tailwind base;
@tailwind components;
@tailwind utilities;

V4:
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap")
layer(base);
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200")
layer(base);

@import "tailwindcss";

please support this. Thanks a lot.

[Aman3899]

It looks like your Google Fonts are not loading correctly in production but work fine in development. Here are some possible reasons and solutions:

---

Possible Causes & Fixes

1. Incorrect @import syntax in V4

Your updated V4 syntax is incorrect. The @import statement should not be followed by layer(base);. Instead, follow the standard import format.

✅ Solution: Use the correct @import syntax

Modify your global.css to this:

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700");

@tailwind base;
@tailwind components;
@tailwind utilities;

---

2. Next.js Optimized Font Loading (Recommended Approach)

Instead of using @import in CSS, Next.js automatically optimizes Google Fonts. The best way to load them is by using Next.js built-in font module:

✅ Solution: Use next/font/google

Modify your _app.tsx or layout.tsx (depending on your setup):

import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ subsets: ["latin"], weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"] });

export default function Layout({ children }) {
  return (
    <main className={montserrat.className}>
      {children}
    </main>
  );
}

This ensures proper font loading in both development and production.

---

3. CSP (Content Security Policy) Blocking Requests

If your production environment enforces CSP rules, it might be blocking external font imports.

✅ Solution: Update next.config.js to allow Google Fonts

Modify your next.config.js:

module.exports = {
  images: {
    domains: ["fonts.googleapis.com", "fonts.gstatic.com"],
  },
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value: "default-src 'self'; font-src 'self' https://fonts.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;",
          },
        ],
      },
    ];
  },
};

[khoatran2014]

Thanks a lot

[Aman3899]

Glad to hear that your issue is resolved now.