Linearly interpolate between any two .ttf fonts.
Upload two font files and watch them morph into each other. The slider controls the interpolation between 0% (first font) and 100% (second font).
You can enter different text for each font, and Folent will interpolate both the font shapes and the characters themselves. If the texts have different lengths, the remaining characters only interpolate the font.
- Real-time font interpolation preview
- Dual text inputs (one per font)
- Full character grid showing all common glyphs
- Export interpolated SVG Font (compatible with Glyphr Studio)
- Export individual character interpolations as SVG
npm install
npm run devOpen http://localhost:5173 in your browser.
Folent parses .ttf files with opentype.js, extracts glyph paths, and uses flubber to interpolate between the vector shapes. It handles:
- Mismatched subpath counts (pads with degenerate paths)
- Different winding orders (normalizes direction)
- Complex symbols with multiple components (proximity-based matching)
The interpolation happens per-character, so each glyph gets its own morph animation.
- React + TypeScript
- Vite
- opentype.js (font parsing)
- flubber (shape interpolation)
- Tailwind CSS
MIT