1. Get a font to turn into 3D

There are many options for fonts to choose from. Font Squirrel and 1001 Free Fonts are two good, legal resources that have search capabilities to help you find fonts by type.

2. Generate the font.js file

Use the Facetype.js website to upload your font, hit "convert" and follow the steps until it gives you a download.

3. Include the font on your page

A simple script tag will do the trick:

<script src="your-font.typeface.js"></script>

4. Instantiate TextGeometry with Three.js

To find the name of your font to include, open the font.js file in a text editor and look for "font_family_name":". The next quoted string is the font name you want to include as font for the TextGeometry call.

Please note the font name must be lowercased for TextGeometry instantiation, even if it is capitalized in the font.js file!

    var material = new THREE.MeshPhongMaterial({
        color: 0xdddddd
    });
    var textGeom = new THREE.TextGeometry( 'Hello World!', {
        font: 'your font name' // Must be lowercase!
    });
    var textMesh = new THREE.Mesh( textGeom, material );

    scene.add( textMesh );

    // Do some optional calculations. This is only if you need to get the
    // width of the generated text
    textGeom.computeBoundingBox();
    textGeom.textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;

You can see all of the options for TextGeometry, including bevel and point density, at the Three.js TextGeometry documentation page

Troubleshooting

If you get either of these errors:

Uncaught TypeError: Cannot read property 'normal' of undefined
Uncaught TypeError: Cannot read property 'bold' of undefined

Then Three.js was unable to find your font and weight combination. It's a very poor error, so make sure to yell loudly at @mrdoob if you get it. Then try the following:

• Make sure the font file is loaded on the page. Use the network tab in the Webkit inspector (in Chrome) to watch for it.
• Make sure you lowercased your font name.
• Try including a different weight:

    var textGeom = new THREE.TextGeometry( 'Hello World!', {
        font: 'your font name',

        weight: 'bold'

        // OR

        weight: 'normal'
    });

Example

Go check out the example, dufus!

Resources and links

• The wonderful stemkoski has some Text3D examples on his ever growing reposotory: http://stemkoski.github.io/Three.js.
• Checkout the documentation for TextGeometry and the source.

That's It!

If this post helped you create a Three.js font, consider following me on Twitter or buying me a coffee :).