Change font-family for texture text in three.js

Question

I use plugin «threex.dynamictexture.js» in my app and have some trouble with loading my font (I have trouble even using existing helvetiker_bold.typeface.json ). I use the following pattern:

function loadFont() {

                var loader = new THREE.FontLoader();
                loader.load('/threejs/fonts/helvetiker_bold.typeface.json', function (font) {

                    dynamicTexture  = new THREEx.DynamicTexture(canvasWrapper.offsetWidth,canvasWrapper.offsetHeight);
//                    dynamicTexture.context.font  = 'bolder 90px Helvetiker';
                    var geometry2    = new THREE.SphereGeometry( 5, 100, 100);
                    var material2    = new THREE.MeshBasicMaterial({
                        map : dynamicTexture.texture
                    });
                    var mesh2    = new THREE.Mesh( geometry2, material2 );
                    console.log(font);

                    dynamicTexture.texture.needsUpdate  = true;
                    mesh2.position.set(10, 10, 10);
                    scene.add( mesh2 );

                    dynamicTexture.drawText('Hello', 100, 300, 'black', 'bolder 90px helvetiker');


                });
            }

After that I can see rendered text texture on my geometry, but the font-family is still the default. And if I use Arial instead Helvetiker(or helvetiker) the rendered text become Arial.

I looked everywhere, but found only about TextGeometry solution. By the way I could load my font-family using TextGeometry loader. Can you help me? Thanks!

Answer 1

Seems you mix up system fonts with three.js fonts.

helvetiker_bold.typeface.json has nothing in common with Helvetiker.ttf . It's intended to be used for TextGeometry . To draw with "Helvetiker" on a canvas, you have to add/install Helvetiker.ttf to the fonts on your system.

If you use it for yourself, it's okay if you find and install the font you need. But the other users, who don't have such font on their system, will see writings with the default font.

The solution is to find a font from standard system fonts which is more or less similar to Helvetiker (or the font you would like to use/see).