TextGeometry creates incorrect geometry using TTF Google Fonts

[bydesign]

Loading a TTF Google Font with TTFLoader and creating geometry using TextGeometry creates inverted normals and negative spaces on characters that have counter forms (such as "o", "e", "g", etc.) in the resulting mesh (see screenshot below):

To Reproduce
Steps to reproduce the behavior:

1. Visit https://jsfiddle.net/u82Lmn4e/12/
2. Look at the letters "o", "g", and "e" to see how the mesh generation is incorrect for those letters.

Code

const loader = new TTFLoader();
      loader.load( 'https://fonts.gstatic.com/s/abhayalibre/v13/e3tmeuGtX-Co5MNzeAOqinEge0PWovdU4w.ttf', function ( json ) {

      var font = new Font( json );
      var textGeo = new TextGeometry( "Together", {
              font: font,
              size: 12,
              height: 3,
              curveSegments: 6,
              bevelThickness: .1,
              bevelSize: .1,
              bevelEnabled: true
            } );

            textGeo.computeBoundingBox();
            const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
            mesh = new THREE.Mesh( textGeo, material );
            scene.add( mesh );
  } );

Live example
https://jsfiddle.net/u82Lmn4e/12/

Expected behavior
The letter normals should be calculated correctly outside and the counter form should be hollow instead of filled.

Screenshots

Platform:

• Device: Desktop
• OS: MacOS
• Browser: Chrome
• Three.js version: 0.142.0

[Mugen87]

It seems the issue can be fixed by updating Font. Instead of using ShapePath.toShapes(), I've used the custom createShapes() implementation of SVGLoader (see #21380). SVGLoader.createShapes() just needs a small patch to avoid a runtime error. The result looks like so then:

The issue is that the loaded font defines contours and holes in a way such that ShapePath.toShapes() is unable to process it. SVGLoader.createShapes() does not have this problem.

[Mugen87]

SVGLoader.createShapes() just needs a small patch to avoid a runtime error.

#24293

[bydesign]

@Mugen87 thanks so much for looking into this so quickly!

Sorry, I'm new to Three.js. I grabbed the patched version of SVGLoader.js, but what specific changes do I make to the FontLoader.js file? I found this on line 75:
shapes.push( ...paths[ p ].toShapes() );

But toShapes() doesn't appear to be defined in FontLoader.js, so what's the best way to replace that function with SVGLoader.createShapes()?

[Mugen87]

It should be:

shapes.push( ...SVGLoader.createShapes( paths[ p ] ) );

[bydesign]

@Mugen87 that worked after I imported the patched SVGLoader. Thanks!