If you've ever tried to load a standard .ttf or .otf file directly into THREE.TextGeometry, you probably ran into errors. That's because WebGL doesn't natively understand vector font curves.
Three.js relies on a format called Typeface JSON. This is essentially a JSON file that pre-calculates the paths of every glyph, allowing the 3D engine to triangulate and extrude them into 3D meshes efficiently.
Step 1: Uploading Your Font
Head over to the Vextrude Font Converter. Since the tool runs entirely in your browser using opentype.js, your font files are never uploaded to a server. This makes it safe for proprietary or licensed fonts.
- Click the drop zone or drag your file onto it.
- Supported formats: TTF (TrueType) and OTF (OpenType).
- The tool will immediately parse the file and show a 3D preview.
Step 2: Optimizing Settings
Before downloading, you have two critical settings to check in the "Conversion Settings" panel:
Reverse Winding
If your 3D text looks "inside out" or has holes where it shouldn't, enable Reverse Winding. This flips the direction of the path definitions. It's a common issue with certain font editors, and this toggle fixes it instantly.
Restrict Characters
Font files can be huge, especially if they contain CJK characters or extensive symbol sets.
- Unchecked: Converts every glyph in the font. Good for complete support, but large file size.
- Checked: Converts only English letters, numbers, and basic punctuation. Drastically reduces JSON size (often from 1MB+ down to 50KB).
Step 3: Using the File
Once you click Download JSON, you'll get a file that works with any Three.js project.
In Vextrude Text Tool
You can upload this JSON file directly into the Text to 3D Tool to use your custom font with all our material and lighting effects.
In Your Own Code
If you're a developer, load the file using FontLoader:
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
const loader = new FontLoader();
loader.load('path/to/your-font.json', function (font) {
const geometry = new TextGeometry('Hello World', {
font: font,
size: 80,
height: 5,
});
// ... create mesh
});