So I am using three.js for a project and would like to be able to use a font other than the default "helvetiker". I've done some digging and discovered that you need to convert the font using typeface.js to get a font file, and have already done that, I just can't figure out how to "plug" this font into threejs. I've dug through the mrdoob three.js examples and can't find anything, Ive also dug around in the three.js source file and have found a loadFace function in THREE.FontUtils, but i'm not sure how to use this. This is my first project using Three.js so any help would be greatly appreciated. Thanks!

Greg

So I am using three.js for a project and would like to be able to use a font other than the default "helvetiker". I've done some digging and discovered that you need to convert the font using typeface.js to get a font file, and have already done that, I just can't figure out how to "plug" this font into threejs. I've dug through the mrdoob three.js examples and can't find anything, Ive also dug around in the three.js source file and have found a loadFace function in THREE.FontUtils, but i'm not sure how to use this. This is my first project using Three.js so any help would be greatly appreciated. Thanks!

Greg

• javascript
• fonts
• three.js
• typeface.js

3 Answers 3

I see this question unanswered exactly. The exact font name that is necessary for threejs should be found at the end of the typeface (js) file. It is:

"familyName":"fontname"

threejs needs the name inside the quotes BUT in LOWERCASE. So Example for e.g. font: Old English Text MT

You should find at the end of the (js) typeface file...,"familyName":"Old English Text MT",... so you fill in threejs this:

font: "old english text mt"

(or whatever is exactly after familyName in quotes but in lowercase. If you edit the text after familyName in the (js) typeface file e.g. "familyName":"cAt aNd DOg" you have to use it then. So threejs declare should look then:

var text3d = new THREE.TextGeometry(n.text, { size: 15, height: 10, curveSegments: 10, font: "cat and dog" });

Finally be sure you put your (js) typeface file into header section for the web site e.g:

<script src="fonts/droid/droid_serif_bold.typeface.js"></script>

Last thing that would be helpful is link for (js) typeface file generator: http://typeface.neocracy/fonts.html

All I had to do for mine was load the font in a script tag and change the font in the TextGeometry:

var text3d = new THREE.TextGeometry(n.text, {
  size: 10,
  height: 5,
  curveSegments: 2,
  font: "droid sans"  //change this
});

I don't think there are any other steps necessary.

As Tim says, the only tricky thing is to get the font name right. It seems to be the "family name" that is inside the generated js, (font_family_name) in lowercase - keeping spaces. You can even edit it (in the .js) if you find it convenient - I've done that myself.