I’m working on a Three.js project where I need to add custom fonts. I have placed my .json font file inside a fonts folder located in the static directory. When attempting to load the font using FontLoader, the console logs an error. I’ve ensured the path to the .json file is correct.

I am encountering a syntax error in the console, specifically an Uncaught (in promise) SyntaxError: Unexpected token ‘<‘, “<!DOCTYPE “… is not valid JSON. This suggests that the file being loaded is not parsed as JSON. I suspect it might be returning an HTML page instead. What might be causing this issue, and how can I resolve it?

Here is the snippet of my code that loads the font:

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
const fontLoader = new FontLoader();
fontLoader.load(
    '/fonts/helvetiker_regular.typeface.json',
    () => {
        console.log('font loaded');
    }
);

Here is my full code:
https://github.com/An65011065/FSim/blob/1d33f5e34baefdb7176728a7de9316972e667066/src/script.js

Thank you so much!