ThreeJS secretly supports True Type Fonts

I just learned that ThreeJS supports TrueType fonts. Normally if you want to do full 3D text inside of ThreeJS (rather than drawing 2d text to a canvas and using it as a texture) then you must load fonts in this special JSON format, which you can generate from existing font files. It’s kind of a pain, though, and JSON is obviously not the ideal format for font information.

However, I just learned that ThreeJS has a TrueType font loader in the examples repo. It looks like it has been there for a year or so, but I didn’t see any examples that show how to use it. So here is mine:

Normally you would so something like this:

const fontLoader = new THREE.FontLoader()
loader.load('./myfont.json',fnt => font = fnt)

Now you can do an extra parsing step with the TTFLoader like this:

const loader = new THREE.TTFLoader()
const fontLoader = new THREE.FontLoader()
loader.load('./hobby-of-night.ttf',fnt => font = fontLoader.parse(fnt))

That’s it!

Underneath TTFLoader uses the excellent opentype.js library to parse the ttf file into an object that the regular font system can understand.

I used this to load the awesome open source font Hobby of Night into my Lava Flow VR game:

Enjoy!