Next.js Discord

Discord Forum

custom font working fine in Dev but in product it not working

Unanswered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
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 };


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

1 Reply

Cape lionOP
the more weird thing is local 3000 doesn't show styliung but loading font properly