ThreeJS font not loading

Question

i recently started working with ThreeJS and i can't figure this out . i wanted to load my own fonts to display a 3D Text object in the scene , i followed along this example and everything went well , but now when i only change the "font: " option in TextGeometry Object , everything fells apart and nothing is displayed ( Error is that the font is undefined )

i use typeFace to create the fonts and including the script seems to be fine , i personally thing that there is something with the font's name that i'm typing it wrong , because i read somewhere that everything between .typeface.js is the actual font name that threeJS is looking for and should be included ( in lowercase ) , but in the example , there's no _regular . or maybe the difference between font-name and font-family ... don't know !

thanks .

    <script type="text/javascript" src="mrdoob-three.js-1769fbf/examples/fonts/helvetiker_regular.typeface.js"></script>
    <script type="text/javascript" src="trebuchet_ms.typeface.js"></script>


        var textGeo = new THREE.TextGeometry( "THREE.JS", {
            size: 50,
            height: 10,
            curveSegments: 50,
    //        font: "helvetiker",  works fine 
            font: "trebuchet_ms",
    //        weight: "bold",
    //        style: "normal",
            bevelThickness: 11,
            bevelSize: 0,
            bevelEnabled: true
        });
        textGeo.computeBoundingBox();
        var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000} );
        var mesh = new THREE.Mesh( textGeo, textMaterial );
        mesh.position.set(0,0,0) ;
        mesh.castShadow = true;
        mesh.receiveShadow = true;
        scene.add( mesh );

Uncaught The font trebuchet with normal weight and normal style is missing.

Answer 1

Here is how to find the font name to use:

1. Open up the typeface.js file
2. Look for the font_family property: "font_family_name":"Trebuchet MS"
3. Change it to all lowercase. Spaces are fine.

So in your particular example:

var textGeo = new THREE.TextGeometry( "THREE.JS", {

    size: 200,
    height: 50,
    curveSegments: 12,

    font: "trebuchet ms",
    // weight: "normal",
    // style: "normal",

    bevelThickness: 2,
    bevelSize: 5,
    bevelEnabled: true

});

Tip: When in doubt, evaluate THREE.FontUtils.faces in the browser console when you hit the error. This will give you the names of all the currently registered fonts.