Use TTFLoader in useFont for non-JSON files

[mz8i]

Why

Resolves #2094

What

I modified useFont to rely not only on FontLoader, but also TTFLoader, which can transform an ArrayBuffer to Typeface.json object. If a string is passed to the Text3D.font prop, or to useFont directly, and the content type of the fetched response is not application/json, then TTFLoader is used first.

NOTE: the Storybook story is draft for now in that I didn't want to add any .ttf file to the .storybook/public/fonts folder, so the story points to a Placeholder.ttf and will error. I welcome suggestions on what font file should be added to the tests when considering licensing.

Also NOTE: the current implementation doesn't allow for setting properties on the loaders. FontLoader doesn't really have any properties apart from the ones inherited from base Loader, and the original code also didn't give an option to access these. However, TTFLoader does have one important property: reversed (which is the same as the "reverse direction" checkbox on the Facetype.js website and helps deal with issues with rendering of characters such as "8", "b" etc). I haven't figured out yet what would be a nice way to allow for setting this property. Perhaps something like:

<Text3D font="/fonts/Example.ttf" loaderArgs={ ttf: {reversed: true } } >
Text
</Text3D>

I also updated the documentation/examples, but any suggestions for improvements there are very welcome!

Checklist

• Documentation updated (example)
• Storybook entry added (example)
• Ready to be merged

[vercel]

@mz8i is attempting to deploy a commit to the Poimandres Team on Vercel.

A member of the Team first needs to authorize it.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.