[V4] Cannot load google fonts correctly

[pcpLiu]

Hey,

We are migrating from v3 to v4. Seems our google fonts are not working with the new setup.

Our main css file in our nextjs project

@import url("https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap");

@import "tailwindcss";
@plugin "daisyui";

@theme {
....
  --font-slogan: "Julius Sans One", "serif";
....
}

in the component

...
      <div className="italic text-md py-0 hidden lg:block font-slogan">
          {text}
        </div>
...

Packages:

    "tailwindcss": "4.0.14",
    "@tailwindcss/postcss": "4.0.0"

We checked discussion #13890 but seems we are doing what suggested in the answer and in the doc.

Wondering if we miss anything. thanks!

Also, before we just did something like

.slogan-font {
  /* font-family: "Ubuntu", sans-serif; */
  font-family: "Julius Sans One", serif;
  font-weight: 500;
  font-style: normal;
}

Is this not supported anymore in v4?

[pcpLiu]

Turns out it's related how NEXTJS loading fonts...we need to load fonts explicitly with "next/font/google"