2D Text font - trying fallback RangeError: offset is outside the bounds of the DataView #2994

davidburchakov · 2023-09-04T18:20:57Z

davidburchakov
Sep 4, 2023

Hello!
I try to change the font of the Text, but I keep getting the same error:

Failure loading font http://localhost:3000/public/bangers.woff; trying fallback RangeError: offset is outside the bounds of the DataView
    readUint blob:http://localhost:3000/9a33b030-ff2c-46a0-b3c0-02e93f4db9dc:84
    _readFont blob:http://localhost:3000/9a33b030-ff2c-46a0-b3c0-02e93f4db9dc:38
    parse blob:http://localhost:3000/9a33b030-ff2c-46a0-b3c0-02e93f4db9dc:22
    parse blob:http://localhost:3000/82cec02b-c818-41e6-8e4b-079128ad0d10:267
    onload blob:http://localhost:3000/1b822e3c-b5aa-4cdf-8c22-d9645982f6a3:48

I tried .woff and .ttl files downloaded from google. I also tried to import it remotely

<Text font={"https://fonts.googleapis.com/css?family=Bangers"}>I Love</Text>

.jsx file is inside /src, font file is inside /public

Here's the code:

import 'css/laptop.css';
import { useFrame, extend } from '@react-three/fiber';
import { Html, OrbitControls, PivotControls, Text } from '@react-three/drei';
import { useRef } from 'react';
import * as THREE from 'three';

extend({Text});
export default function Contact(){
    
    const laptopRef = useRef()
    const groupRef = useRef()
    useFrame((state, delta) => {
        groupRef.current.rotation.y += delta
    })

    const customControls = {
        enableDamping: true
      };

    // <Canvas> is defined in a different file
    return <>
            <OrbitControls {...customControls}/>

            <PivotControls>
            <group ref={ groupRef }>
                <mesh ref={ laptopRef } scale={3} rotation-y={15}>
                    <boxGeometry/>
                    <meshNormalMaterial />
                    <Html   
                        wrapperClass='text3D' 
                        center
                        distanceFactor={ 3 }
                        >
                        Apple Laptop
                    </Html>
                </mesh>
            </group>
            
            <Text position={[4,4,4]} font="./bangers.woff">I Love</Text>
            </PivotControls>
    </>
}

I didn't try Text3D and I don't have troika-3d-text installed.
Can you please review the problem?

Answered by davidburchakov

Sep 7, 2023

The solution

font={process.env.PUBLIC_URL +"/bangers.woff"}

To target the public directory, I need to use
process.env.PUBLIC_URL

More about using the public folder in react:
https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system

Answered before:
https://stackoverflow.com/questions/71189191/access-files-in-public-directory-after-production-create-react-app

View full answer

davidburchakov · 2023-09-07T03:13:59Z

davidburchakov
Sep 7, 2023
Author

The solution

font={process.env.PUBLIC_URL +"/bangers.woff"}

To target the public directory, I need to use
process.env.PUBLIC_URL

More about using the public folder in react:
https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system

Answered before:
https://stackoverflow.com/questions/71189191/access-files-in-public-directory-after-production-create-react-app

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2D Text font - trying fallback RangeError: offset is outside the bounds of the DataView #2994

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

2D Text font - trying fallback RangeError: offset is outside the bounds of the DataView #2994

davidburchakov Sep 4, 2023

Replies: 1 comment

davidburchakov Sep 7, 2023 Author

davidburchakov
Sep 4, 2023

davidburchakov
Sep 7, 2023
Author