Text geometry not rendering on screen, used fontLoader

Questions
, , ,
1

zone.js: GET http:localhost/fonts/helvetiker_bold.typeface.json 404 (Not Found)
Facing this issue while adding text geometry.

The code which I have written is:

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {

var textGeo = new THREE.TextGeometry( "My Text", {

    font: font,

    size: 200,

    height: 50,

    curveSegments: 12,

    bevelThickness: 2,

    bevelSize: 5,

    bevelEnabled: true

} );

  

  var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );

  var textGeometry = new THREE.Mesh( textGeo, textMaterial );

});

Do I have to add helvetiker_bold.typeface.json file format explicitly?

2

Well, you do have to add it in a proper place for your webserver to serve it from. The error you see says that the server cannot find any file under the path you gave.

Not solving problem with your webserver, but you can always go the easy way in just import the font (since it’s a JSON file).

(Opt. 1) If your bundle resolves .json files as JS-objects:

import HelvetikerFont from 'three/examples/fonts/helvetiker_regular.typeface.json';

const geometry = new Three.TextBufferGeometry(title, {
  font: HelvetikerFont
});

(Opt. 2) If your bundle resolves .json files as absolute paths:

import HelvetikerFontPath from 'three/examples/fonts/helvetiker_regular.typeface.json';

loader.load(HelvetikerFontPath, function (font) {
  const geometry = new Three.TextBufferGeometry(title, { font });
});
3

As of 2023, I’ll add to mjurczyk solution “Opt.1” that you may need to parse the provided JSON to obtain a valid FONT :

import HelvetikerFont from 'three/examples/fonts/helvetiker_regular.typeface.json';
const loader = new FontLoader();
const font = loader.parse(HelvetikerRegularFont);
const geometry = new TextGeometry("Hello");

Took me some time to figure out !