ttf to json conversion
Martin Wenzel
Posts: 48
Hi, can anyone suggest a ttf to json converter? I've never even heard before that a json can be made from a ttf. The client wants to use it for “360° graphics”. Does that ring a bell?
I have found a converter online that seems to be popular (like https://gero3.github.io/facetype.js/) but wouldn't mind a 2nd opinion.
0
Comments
-
The "json" font format is a Three.js idiosyncrasy. In their documentation it just says:
Font
Create a set of Shapes representing a font loaded in JSON format.
This is used internally by the FontLoader.So likely this is a json encoded svg representation of the glyphs in the font. It really isn't clear if the resulting "font" actually has metrics, features, kerning, etc. or if it is just the glyph geometry. The tool you linked above is also the only available "encoder" (another one seems to be defunct) so that is the way.Personally, I'd leave it up to the client and their developers implementing the Three.js animations to convert the font so as to avoid personal liability for the output and quality of the converter.2 -
Hi @Johannes Neumeier, thanks for your insight. Much appreciated.
0 -
I just found that ThreeJS also seems to support ttf:
0 -
Note that the FontLoader they supply relies on Opentype.js, which in turn will be a large dependency library to include and load for the end user. Potentially it still makes sense to use the json encoding to save that download time. Either way, it might also be a useful optimization to subset the font (with either encoding/loading strategy) to the bare minimum needed for the animation. Even for dynamic text it can probably be subset to save on load time.Also, if you have a look at what data the FontLoader exposes it is clear that Three.js internally works only with the glyph outlines and basic vertical metrics, so no features, kerning or other niceties.Edit: In fact, if you look at the source code of the conversion tool, it also uses Opentype.js to expose, and then json-encode, the very same data - it just saves you from having to include Opentype.js as a dependency on your animation website.1
Categories
- All Categories
- 40 Introductions
- 3.7K Typeface Design
- 796 Font Technology
- 1K Technique and Theory
- 615 Type Business
- 444 Type Design Critiques
- 539 Type Design Software
- 30 Punchcutting
- 136 Lettering and Calligraphy
- 83 Technique and Theory
- 53 Lettering Critiques
- 482 Typography
- 301 History of Typography
- 114 Education
- 67 Resources
- 495 Announcements
- 79 Events
- 105 Job Postings
- 148 Type Releases
- 162 Miscellaneous News
- 269 About TypeDrawers
- 53 TypeDrawers Announcements
- 116 Suggestions and Bug Reports