Three.js Font Generator

Convert uploaded font files to Three.js FontLoader JSON format for use in 3D text rendering applications. This tool processes font files locally without sending data to any server.

How to use this Three.js Font Generator

  1. Select a font file (.ttf, .otf, .woff, .woff2)
  2. Click "Convert to Three.js Font" to process the font
  3. Download the generated JSON file for use with Three.js FontLoader
  4. Use the JSON file in your Three.js projects to create 3D text

Supported Font Formats

  • TTF - TrueType Font
  • OTF - OpenType Font
  • WOFF - Web Open Font Format
  • WOFF2 - Web Open Font Format 2.0

Usage in Three.js

import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

const loader = new FontLoader();
loader.load('/path/to/font.json', (font) => {
  const geometry = new TextGeometry('Hello World', {
    font: font,
    size: 80,
    height: 5,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 8,
    bevelOffset: 0,
    bevelSegments: 5
  });
});

Important Notes

  • Font files are processed entirely in your browser - no data is sent to servers
  • Large font files (>5MB) may take longer to process
  • Generated JSON files are optimized for Three.js TextGeometry
  • Only basic Latin characters (A-Z, a-z, 0-9, punctuation) are converted

Font File Input

Conversion Status

No font file selected