css Question posted in
Some basic documentation can be found here.

Css – 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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    It looks like there is no problem with your code.

    1. Verify the font paths are correct and accessible in the production build.
    2. Check Tailwind is properly configured.
    3. Review the Next.js build logs for any errors related to fonts or CSS.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search