fix: Revert "feat: Use TTFLoader in useFont for non-JSON files (#…

…2095)"

This reverts commit 61d3bc5.

.storybook/stories/Text3D.stories.tsx

@@ -16,10 +16,6 @@ export default {
       </Setup>
     ),
   ],
-  args: {
-    bevelEnabled: true,
-    bevelSize: 0.05,
-  },
 } satisfies Meta<typeof Text3D>
 
 type Story = StoryObj<typeof Text3D>
@@ -40,15 +36,9 @@ function Text3DScene(props: React.ComponentProps<typeof Text3D>) {
 export const Text3DSt = {
   args: {
     font: '/fonts/helvetiker_regular.typeface.json',
+    bevelEnabled: true,
+    bevelSize: 0.05,
   },
   render: (args) => <Text3DScene {...args} />,
   name: 'Default',
 } satisfies Story
-
-export const Text3DTtfSt = {
-  args: {
-    font: '/fonts/lemon-round.ttf',
-  },
-  render: (args) => <Text3DScene {...args} />,
-  name: 'TTF',
-} satisfies Story

docs/abstractions/text3d.mdx

@@ -15,8 +15,6 @@ Render 3D text using ThreeJS's `TextGeometry`.
 
 Text3D will suspend while loading the font data. Text3D requires fonts in JSON format generated through [typeface.json](http://gero3.github.io/facetype.js), either as a path to a JSON file or a JSON object. If you face display issues try checking "Reverse font direction" in the typeface tool.
 
-Alternatively, the path can point to a font file of a type supported by [opentype.js](https://github.com/opentypejs/opentype.js) (for example OTF or TTF), in which case the conversion to the JSON format will be done automatically at load time.
-
 ```jsx
 <Text3D font={fontUrl} {...textOptions}>
   Hello world!

docs/loaders/use-font.mdx

@@ -3,23 +3,15 @@ title: useFont
 sourcecode: src/core/useFont.tsx
 ---
 
-Uses `THREE.FontLoader` to load a font and returns a `THREE.Font` object. It also accepts a JSON object as a parameter. You can use this to preload or share a font across multiple components.
+Uses THREE.FontLoader to load a font and returns a `THREE.Font` object. It also accepts a JSON object as a parameter. You can use this to preload or share a font across multiple components.
 
 ```jsx
 const font = useFont('/fonts/helvetiker_regular.typeface.json')
-return <Text3D font={font.data} />
+return <Text3D font={font} />
 ```
 
 In order to preload you do this:
 
 ```jsx
 useFont.preload('/fonts/helvetiker_regular.typeface.json')
 ```
-
-If the response from the URL is not a JSON, `THREE.TTFLoader` is used to try parsing the response as a standard font file.
-However, keep in mind that the on-the-fly conversion to the JSON format will impact the loading time.
-
-```jsx
-const font = useFont('/fonts/helvetiker_regular.ttf')
-return <Text3D font={font.data} />
-```

src/core/Text3D.tsx

@@ -2,8 +2,9 @@ import * as React from 'react'
 import * as THREE from 'three'
 import { extend, MeshProps, Node } from '@react-three/fiber'
 import { useMemo } from 'react'
-import { mergeVertices, TextGeometry, TextGeometryParameters } from 'three-stdlib'
-import { useFont } from './useFont'
+import { suspend } from 'suspend-react'
+import { mergeVertices, TextGeometry, TextGeometryParameters, FontLoader } from 'three-stdlib'
+import { useFont, FontData } from './useFont'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
 declare global {
@@ -15,7 +16,7 @@ declare global {
 }
 
 type Text3DProps = {
-  font: Parameters<typeof useFont>[0]
+  font: FontData | string
   bevelSegments?: number
   smooth?: number
 } & Omit<TextGeometryParameters, 'font'> &

src/core/useFont.tsx

@@ -1,4 +1,4 @@
-import { FontLoader, TTFLoader } from 'three-stdlib'
+import { FontLoader } from 'three-stdlib'
 import { suspend, preload, clear } from 'suspend-react'
 
 export type Glyph = {
@@ -22,7 +22,10 @@ export type FontData = {
 type FontInput = string | FontData
 
 let fontLoader: FontLoader | null = null
-let ttfLoader: TTFLoader | null = null
+
+async function loadFontData(font: FontInput): Promise<FontData> {
+  return typeof font === 'string' ? await (await fetch(font)).json() : font
+}
 
 function parseFontData(fontData: FontData) {
   if (!fontLoader) {
@@ -31,31 +34,9 @@ function parseFontData(fontData: FontData) {
   return fontLoader.parse(fontData)
 }
 
-function parseTtfArrayBuffer(ttfData: ArrayBuffer) {
-  if (!ttfLoader) {
-    ttfLoader = new TTFLoader()
-  }
-  return ttfLoader.parse(ttfData) as FontData
-}
-
-async function loadFontData(font: FontInput) {
-  if (typeof font === 'string') {
-    const res = await fetch(font)
-
-    if (res.headers.get('Content-Type')?.includes('application/json')) {
-      return (await res.json()) as FontData
-    } else {
-      const arrayBuffer = await res.arrayBuffer()
-      return parseTtfArrayBuffer(arrayBuffer)
-    }
-  } else {
-    return font
-  }
-}
-
 async function loader(font: FontInput) {
-  const fontData = await loadFontData(font)
-  return parseFontData(fontData)
+  const data = await loadFontData(font)
+  return parseFontData(data)
 }
 
 export function useFont(font: FontInput) {