cssnext.jsfontsnextjs14

next js custom font working fine in Dev environment but when i build it locally it doesn't work

I am using amazon font Ember as custom font in my app , i have setup a font,ts file in lib folder and export the font properly as instructed in different blog post and make it working in my dev server but when i build app its look when i go to localhost:3000 first the css is not loaded , then i go to auth page , the CSS loads properly , comes back to / and it start working fine but the font didn't load , its show systemUi as font style that i never user even in a fallback i am using arial and san serif

here is my code

import localFont from "next/font/local";

const Ember = localFont({
    src: [
        {
            path: "../app/AmazonEmber_Th.ttf",
            weight: "100",
            style: "normal",
        },
        {
            path: "../app/AmazonEmber_Lt.ttf",
            weight: "200",
            style: "normal",
        },
        {
            path: "../app/AmazonEmber_Rg.ttf",
            weight: "400",
            style: "normal",
        },
        {
            path: "../app/Amazon-Ember-Medium.ttf",
            weight: "500",
            style: "normal",
        },
        {
            path: '../app/AmazonEmber_Bd.ttf',
            weight: "700",
            style: "normal",
        },
        {
            path: '../app/AmazonEmber_He.ttf',
            weight: "900",
            style: "normal",
        }
    ],
    variable: "--font-ember",
    display: "swap",
    fallback: ["sans-serif", "arial"],
});

export { Ember };

 my tailwind config file 


import type { Config } from "tailwindcss"

const config = {
  theme: {
    fontFamily: {
      Ember: ['var(--font-ember)', 'sans-serif']
    }
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
in root layout <body className={${Ember.className} font-Ember}>

Note , i dont work on defalut root layout i have group routes , each route does have it's own layout

The more weird thing is that the font loaded properly at / but the css didn't load and when go to auth/login the css load and fon't didn't enter image description here

Solution

  • I find a workaround is by adding a duplicate globals.css file into the (customer) grouped route and the css started working properly on production as well