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?
CSS3DRender
https://rawgit.com/Mugen87/three.js/dev8/docs/index.html#examples/renderers/CSS3DRenderer
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…
WebGLRenderer
https://threejs.org/docs/index.html#api/renderers/WebGLRenderer
@donmccurdy = HTMLtoCanvas
Custom Triangulation
http://r3mi.github.io/poly2tri.js/
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
http://www.geofx.com/graphics/nehe-three-js/lessons09-16/lesson13/lesson13.html
@donmccurdy = https://www.npmjs.com/package/three-bmfont-text = used in A-Frame
Vector Font
http://www.geofx.com/graphics/nehe-three-js/lessons09-16/lesson14/lesson14.html
Signed Distance Field Fonts(SDF)
http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf
https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817#4a3c
GPU Text
http://wdobbie.com/post/gpu-text-rendering-with-vector-textures/
Sprite
https://stemkoski.github.io/Three.js/Sprite-Text-Labels.html
https://stemkoski.github.io/Three.js/Labeled-Geometry.html
SVG Path
https://threejs.org/examples/webgl_geometry_shapes.html
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
Other font resources
Unity
VText = This is what caught my eye: Creating 3D text @ runtime
https://assetstore.unity.com/packages/tools/modeling/vtext-24768
TextMesh Pro = doesn’t appear to be 3D related more like SDF
https://assetstore.unity.com/packages/essentials/beta-projects/textmesh-pro-84126
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.
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:
three.js-displacement-map
http://meetar.github.io/three.js-displacement-map/three.js-displacement-gui.html
https://github.com/meetar/three.js-displacement-map
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 
@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 
Missed an important thought need the text to be 3D geometry to 3D print. Back to using TTF-JSON - bummer 
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.
It is mostly in German, but certainly understandable.
http://threejs.hofk.de/display/display.html
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.
Found something for fun while looking for the modifier: Wood Lathe
http://inear.se/lathe/
@prisoner849
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