ttf to json conversion

Martin Wenzel
Martin Wenzel Posts: 48
in Font Technology
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.
Tagged:

Comments

  • Johannes Neumeier
    Johannes Neumeier Posts: 377
    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.
  • Martin Wenzel
    Martin Wenzel Posts: 48
    Hi @Johannes Neumeier, thanks for your insight. Much appreciated.
  • Martin Wenzel
    Martin Wenzel Posts: 48
    I just found that ThreeJS also seems to support ttf:

  • Johannes Neumeier
    Johannes Neumeier Posts: 377
    edited October 2020
    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.

Categories