𝔽 How many ways to load a font in Three.js?

This is for those that wished they had a document for the many font ways with Three.js.
Maybe you know of another way please participate to this listing if you can think of another way.

My journey on fonts in Three.js to create 3D text at runtime without having to load a typeface.json. CSS3DRenderer looked promising though NOT allowed in generating a mesh ONLY the WebGLRenderer allows this to happen.

Do you know of another way to load a font into Three.js?


Flat and NOT able to use WebGLRenderer to render CSS3DRenderer text as a 3D mesh speaks directly to DOM. The most you can do here is what you can load with HTML/CSS: web safe fonts, @font-face, loading in from a web service: Google fonts…


@donmccurdy = HTMLtoCanvas

Custom Triangulation

Custom TTF-to-JSON
https://gero3.github.io/facetype.js/ = TTF

Three.js Font: https://threejs.org/docs/index.html#api/extras/core/Font
Used with TextGeometry: https://threejs.org/docs/index.html#api/geometries/TextGeometry

@donmccurdy = https://msdf-bmfont.donmccurdy.com/ = MSDF

Fontpath = claims to be a better version of typeface

Bitmap Font

@donmccurdy = https://www.npmjs.com/package/three-bmfont-text = used in A-Frame

Vector Font

Signed Distance Field Fonts(SDF)


GPU Text



SVG Path

Displacement Map = height map
@prisoner849 = https://threejs.org/examples/webgl_materials_displacementmap.html

Freetype GL


OpenType 2

3D Object Loading
Where you import a 3D object from your favorite 3D editor(Blender, Maya, 3DSMAX, Sketchup) into Three.js

Troika 3D Text Library
Discourse: Troika-3d-text: library for SDF text rendering
Github: https://github.com/protectwise/troika/tree/master/packages/troika-three-text
Example: https://troika-examples.netlify.app/#text

Discourse: Three Typeable Text
Github: https://github.com/hexafield/three-typeable-text

1 Like

Other font resources

VText = This is what caught my eye: Creating 3D text @ runtime

TextMesh Pro = doesn’t appear to be 3D related more like SDF

Wow! Some good options there, thanks for the write up.

I would say that, for your purpose of writing on old bottles, a displacement map would give the best and easiest result.
You could use a 2D canvas, write the text there and use that to generate a texture for the displacement map.

1 Like

Welcome and thank you for your response!
Can you share a Three.js example of the 2D canvas concept you are describing?

Quite a few of the official examples use this technique. I’m on mobile now, and the only one I can remember is Canvas Sprites although there are probably better ones.

If you do a text search through all the examples for places where CanvasTexture is used you’ll probably find better ones.

Basically it works like this:

const canvas = document.createElement( 'canvas' );
canvas.width = 1024;
canvas.height = 1024;
var context = canvas.getContext( '2d' );

// Draw stuff such as text on the canvas

// Use canvas as a texture
const texture = new THREE.CanvasTexture( canvas );

What you are describing sounds more interesting than what I’ve found:

Which uses an image and i’m able to generate quickly, more interested in editing with text which sounds like the CanvasSprite/CanvasTexture can provide - YAY!!!

That’s what I was saying about :slight_smile:


@prisoner849 at first I was so focused on how to Create 3D text at runtime when you had mentioned I played with the displacement slider in the example and saw the height change on the spikes, which then I understood displacement = height map.

Are there more displacement examples you could share?

This thread, for example :slight_smile:

Missed an important thought need the text to be 3D geometry to 3D print. Back to using TTF-JSON - bummer :frowning: Thinking if I use a displacement map then I’d need to create a modifier for the 3D object(bottle) to change the topology?

Could you explain more thoroughly what you are trying to do here?

Why not?
In the user interface you work with displacement map for better performance. Then, before you want to send it to a 3D-printer, use a modifier for your geometry.

In addition to the collection of fonts.

When I started out with three.js, I made a font with balls.20180307-1123-5535

It is mostly in German, but certainly understandable.

The font can be edited easily. It is in a simple text file.
This allows you to design your own characters.
You can use other objects instead of the three.js-spheres. For example, hexagons of lines.


Excerpt from the font definition.


@all thank you for your responses

@prisoner849 sweet, have never seen a modifier of this caliber in three.js before, at least not realizing what I was looking at was modifying topology. This is great news hearing this is possible for 3D printing.

Indexing my brain for the past 10 minutes, I have seen this concept before. Just need to remember where the example is, I have it somewhere

Always thought when hearing of any kind of map: normal, bump, displacement and other related maps = gift wrapping or pho 3D = giving the illusion of 3D

Thank you for pushing me in this direction to use the displacement map!

@hofk that is a very interesting approach

I think this is a form of displacement map modifying as to what we’ve been discussing @prisoner849 = https://threejs.org/examples/webgl_materials_texture_canvas.html?

Yes. This is a very good example from 2pha.

1 Like

Found something for fun while looking for the modifier: Wood Lathe

Could using the CSS3DRenderer as a displacement map be possible to render with the WebGLRenderer?

With the CSS3DRenderer not thinking CSS 3D Transform, thinking of using as a texture to do the topology modifier we’ve been discussing