# Facetype.js: A typeface.js generator

**URL:** <https://discourse.threejs.org/t/facetype-js-a-typeface-js-generator/53>\
**Category:** Resources\
**Tags:** fonts, text\
**Created:** [March 15, 2017, 1:26pm UTC](https://discourse.threejs.org/t/facetype-js-a-typeface-js-generator/53 "2017-03-15T13:26:23Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![gero3](https://avatars.discourse-cdn.com/v4/letter/g/ad7895/32.png) [@gero3](https://discourse.threejs.org/u/gero3)\
**Post date:** [March 15, 2017, 1:26pm UTC](https://discourse.threejs.org/t/facetype-js-a-typeface-js-generator/53/1 "2017-03-15T13:26:23Z")

</div>

A simple way to convert ttf files to typeface.json font files, can be found at [facetype.js](https://gero3.github.io/facetype.js/).

Those json files can then be used like [Three.js example](https://threejs.org/examples/#webgl_geometry_text).

![](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/1X/7eebc56c7148fabf510dcbb3e8988d4a2a9040c9.jpg)

---

<div class="post-metadata">

**Author:** ![fraguada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fraguada/32/2_2.png) [@fraguada](https://discourse.threejs.org/u/fraguada)\
**Post date:** [March 16, 2017, 9:03am UTC](https://discourse.threejs.org/t/facetype-js-a-typeface-js-generator/53/2 "2017-03-16T09:03:06Z")

</div>

This is indeed a great resource. Thanks @gero3! Now, if there was some solution to importing Text Geometry through `THREE.ObjectLoader`.

EDIT: Also would be great to have a means to play with this in the [three.js editor](https://threejs.org/editor/). As I understand it, this is not possible as there is no clean workflow. I suppose there could be an entry to ‘add text’ with a default text (‘three.js’), and the properties panel could expose a text field and other parameters to modify the text. The editor could ship with a few pre-defined fonts.

This used to be something you could do in previous versions, but, admittedly, it was not so clean. What I do now is pretty hacky, I modify the r84 `ObjectLoader` to accept `TextGeometry` as was the old case, and add a basic typeface.json file. In my plugin, I export text to json in the following manner:

My geometries is as such:

```
...
"geometries" : [{
    	"uuid" : "d03772e6-7c7e-49e9-aa86-1a6d09aa1ed1",
    	"type" : "TextGeometry",
    	"text" : "hello",
    	"data" : {
    		"size" : 10.0,
    		"height" : 0.0
    	}
   }
 ]...

```

and as a child of the scene:

```
...    
"children" : [{
    	"uuid" : "99ca2a23-cd72-452e-976d-5c5210ce5482",
    	"type" : "Mesh",
    	"name" : "",
    	"geometry" : "d03772e6-7c7e-49e9-aa86-1a6d09aa1ed1",
    	"material" : "fb7ae420-05d4-45ea-b77c-556a040b03e5",
    	"userData" : {}
    	},
    	"matrix" : [1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]
    	} ...

```

Then I make the following changes to ObjectLoader:

```
...
parseGeometries: function ( json ) {

        var geometries = {};

	if ( json !== undefined ) {

	    var geometryLoader = new JSONLoader();
	    var bufferGeometryLoader = new BufferGeometryLoader();
                
            //HACK To make Exported JSON format compatible with latest ThreeJS versions
            var fontBase = { "glyphs": ... some font.json from Facetype.js... };
            var font = new Font(fontBase);

	    for ( var i = 0, l = json.length; i < l; i ++ ) { 
...

```

and:

```
case 'Geometry':

       geometry = geometryLoader.parse( data.data, this.texturePath ).geometry;

        break;

//HACK
case 'TextGeometry':
                            
      geometry = new Geometries[data.type](
                                data.text, {
                                    font: font,
                                    size: data.data.size,
                                    height: data.data.height
                                });
                            
        break;

default:

	console.warn( 'THREE.ObjectLoader: Unsupported geometry type "' + data.type + '"' );

	continue;
```

---

<div class="post-metadata">

**Author:** ![TheCodeCrafter](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thecodecrafter/32/50_2.png) [@TheCodeCrafter](https://discourse.threejs.org/u/TheCodeCrafter)\
**Post date:** [March 16, 2017, 12:04pm UTC](https://discourse.threejs.org/t/facetype-js-a-typeface-js-generator/53/3 "2017-03-16T12:04:29Z")

</div>

That could really work. But we may need a bit more than a hack 😉

---

<div class="post-metadata">

**Author:** ![fraguada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fraguada/32/2_2.png) [@fraguada](https://discourse.threejs.org/u/fraguada)\
**Post date:** [March 16, 2017, 12:40pm UTC](https://discourse.threejs.org/t/facetype-js-a-typeface-js-generator/53/4 "2017-03-16T12:40:46Z")

</div>

Everything save for the embedding of the font glyphs was part of threejs up to the late r70s. Then people noticed that the old font system was not really kept up, and then @gero3 came along and fixed that, subsequently changing the way that text geometry works, and requiring the removal of the last code snipped to be removed from the source.

Essentially the issue lies in where to get the font from:

```
geometry = new Geometries[data.type](
                                data.text, {
                                    font: font,
                                    size: data.data.size,
                                    height: data.data.height
                                });
                            
        break; 

```

I suppose there would need to be a sort of ‘fontSource’ and the code could be like:

case ‘TextGeometry’:

```
  geometry = new Geometries[data.type](
                            data.text, {
                                font: new FontLoader.load( data.fontSource ), // or new Font(data.fontSource);
                                size: data.data.size,
                                height: data.data.height
                            });
                        
    break;
```

---

<div class="post-metadata">

**Author:** ![gero3](https://avatars.discourse-cdn.com/v4/letter/g/ad7895/32.png) [@gero3](https://discourse.threejs.org/u/gero3)\
**Post date:** [March 16, 2017, 12:48pm UTC](https://discourse.threejs.org/t/facetype-js-a-typeface-js-generator/53/5 "2017-03-16T12:48:50Z")

</div>

Actually, we could make it so, that we add a new resourcetype ‘fonts’ to the object json and let textgeometry reference to the font object.

---

<div class="post-metadata">

**Author:** ![fraguada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fraguada/32/2_2.png) [@fraguada](https://discourse.threejs.org/u/fraguada)\
**Post date:** [March 16, 2017, 12:56pm UTC](https://discourse.threejs.org/t/facetype-js-a-typeface-js-generator/53/6 "2017-03-16T12:56:43Z")

</div>

right, and it could be a path or a dataUrl.

---

<div class="post-metadata">

**Author:** ![TheCodeCrafter](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thecodecrafter/32/50_2.png) [@TheCodeCrafter](https://discourse.threejs.org/u/TheCodeCrafter)\
**Post date:** [March 16, 2017, 1:11pm UTC](https://discourse.threejs.org/t/facetype-js-a-typeface-js-generator/53/7 "2017-03-16T13:11:29Z")

</div>

That’s great! 3D Text is back! 😏

---

<div class="post-metadata">

**Author:** ![fraguada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fraguada/32/2_2.png) [@fraguada](https://discourse.threejs.org/u/fraguada)\
**Post date:** [March 18, 2017, 9:12pm UTC](https://discourse.threejs.org/t/facetype-js-a-typeface-js-generator/53/8 "2017-03-18T21:12:44Z")

</div>

PR of a first (non hacky) draft: [https://github.com/mrdoob/three.js/pull/11026](https://github.com/mrdoob/three.js/pull/11026)

---

<div class="post-metadata">

**Author:** ![fraguada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fraguada/32/2_2.png) [@fraguada](https://discourse.threejs.org/u/fraguada)\
**Post date:** [March 20, 2017, 8:32pm UTC](https://discourse.threejs.org/t/facetype-js-a-typeface-js-generator/53/9 "2017-03-20T20:32:35Z")

</div>

If anyone can give me a few hints on how to enable loading fonts stored in .json files in the context of `ObjectLoader`, I’d appreciate it. This is more a js issue rather than three.js. `FontLoader.parse()` works just fine [when a file has the glyphs embedded](https://gist.github.com/fraguada/46ffef2a262d7ebc5ab4170a436234f9#file-scene-json-L9) (this is what the PR above does, and suits my use case perfectly), but I think I will need to change `FontLoader.load()` to be able to use it within `ObjectLoader`. Can anyone get some eyes on that and give me some suggestions?  
Thanks!