Fonts not working

Help
1

the fonts are not working when i deploy . they are working just fine locally

Current versus Expected behavior

Code, configuration, and steps that reproduce this issue

import { Itim } from “next/font/google”;
import localFont from “next/font/local”;

export const betha = localFont({
src: [{path: “…/…/public/fonts/Betha.otf”, weight: “100 900”}],
weight: “100 900”,
});

export const itim = Itim({
subsets: [“latin”],
variable: “–font-Itim”,
weight: “400”,
});

Project information

Deployment URL: avinamoney.com
Environment: production
2

Hi, @parthsharma-lab! Welcome to the Vercel Community :smile:

The issue might be related to the path to your local font file. When deploying, the path structure might be different. Instead of using relative paths, try using an absolute path from the root of your project :

import localFont from "next/font/local";

export const betha = localFont({
  src: "./fonts/Betha.otf",
  weight: "100 900",
});

Make sure your Betha.otf file is in the public/fonts/ directory of your project.

Other things you can check:

  • Make sure that your next.config.js file doesn’t have any configurations that might interfere with font loading.
  • Check if you have any CSS that might be overriding your font declarations.
  • Verify that your deployment platform (assuming Vercel, given the context) has access to all necessary files and directories .
  • If the problem persists, you can try clearing your Vercel project cache and redeploying.

Let us know how you get on!

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.