Three.js text rendering issues

Question

I am currently working on a three.js project and we are running into issues loading fonts onto our text.

We are using TextGeometry object to render our fonts and the typeface js converter to add in our fonts.

Some fonts work great but others do not perform as expected with some letters not rendering correctly such as d's and o's.

This can be seen in the fiddle below, the font is loading the interior of some letters not the exterior.

http://jsfiddle.net/264jawhe/2/

Can anyone identify why this is happening and if there is a better method to display text possibly loading an html element?

Thanks in advance!

var textGeom = new THREE.TextGeometry("Video Dp", 
     {
      font: 'acknowledgement',
      weight: 'normal'
     });
var material2 = new THREE.MeshNormalMaterial();
var textMesh = new THREE.Mesh( textGeom, material2 );

scene.add( textMesh );

Answer 1

Please check the fiddle. Actually the issue is with your font style. I have just changed the font face and its working fine

Refer to this Jsfiddle

var textGeom = new THREE.TextGeometry("Video Dp", {
    font: 'optimer',
    weight: 'normal'
});
var material2 = new THREE.MeshNormalMaterial();
var textMesh = new THREE.Mesh(textGeom, material2);
scene.add(textMesh);

Answer 2

It is related to 'Direction of Paths' of type1 fonts.

Visit this . You can details about the bug with solution and a tool for using any font file for generating mesh.