# Unable to use fontLoader or textGeometry

**URL:** <https://discourse.threejs.org/t/unable-to-use-fontloader-or-textgeometry/35803>\
**Category:** Questions\
**Tags:** font-loader, textgeometry\
**Created:** [March 10, 2022, 6:27pm UTC](https://discourse.threejs.org/t/unable-to-use-fontloader-or-textgeometry/35803 "2022-03-10T18:27:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![genzo](https://avatars.discourse-cdn.com/v4/letter/g/58f4c7/32.png) [@genzo](https://discourse.threejs.org/u/genzo)\
**Post date:** [March 10, 2022, 6:27pm UTC](https://discourse.threejs.org/t/unable-to-use-fontloader-or-textgeometry/35803/1 "2022-03-10T18:27:41Z")

</div>

I am trying to create some 3d text but I get the following error:

```javascript
Uncaught (in promise) SyntaxError: Unexpected string in JSON at position 2
    at JSON.parse (<anonymous>)
    at Object.onLoad (FontLoader.js:34:17)
    at three.module.js:39650:38

```

My code looks something like this:

```javascript
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'

const fontLoader = new FontLoader()

fontLoader.load(
    '/helvetiker_bold.typeface.json',
    (font) => {
        const textGeometry = new TextGeometry('Font Loaded', {
            font: font,
        })
    }
)

```

I thought this was due to the parsing were JavaScript turns JSON into an object, so I decided to import the font directly and use it with textGeometry changing my code to:

```javascript
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
import font from './fonts/helvetiker_bold.typeface.json'

const textGeometry = new TextGeometry('Font Loaded', {
    font: JSON.parse(JSON.stringify(font)),
})

```

This gave me a new error that said:

```javascript
Uncaught TypeError: font.generateShapes is not a function
    at new TextGeometry (TextGeometry.js:34:24)
    at Object.6yeCB.three (index.js:8:22)
    at newRequire (index.b59b4001.js:71:24)
    at index.b59b4001.js:122:5
    at index.b59b4001.js:145:3

```

I have no idea why this is happening or what I can do to fix it, I’ve tried multiple fonts and many different file nesting structures but the problem seems that the font itself isn’t compatible, which is weird considering most of the fonts I used are from the three.js fonts file.

_Some things to note:_

- I have the latest three.js version
- I am using parcel as a development server but I don’t think it’s the issue

Please help : (

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [March 10, 2022, 7:03pm UTC](https://discourse.threejs.org/t/unable-to-use-fontloader-or-textgeometry/35803/2 "2022-03-10T19:03:57Z")

</div>

Take a look at step 11 of the [BeginnerExample](https://hofk.de/main/discourse.threejs/BeginnerExample/BeginnerExample.html) from the [collection](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315). Maybe you will find the error.

---

<div class="post-metadata">

**Author:** ![genzo](https://avatars.discourse-cdn.com/v4/letter/g/58f4c7/32.png) [@genzo](https://discourse.threejs.org/u/genzo)\
**Post date:** [March 10, 2022, 9:57pm UTC](https://discourse.threejs.org/t/unable-to-use-fontloader-or-textgeometry/35803/4 "2022-03-10T21:57:40Z")

</div>

I gotta start by saying that I love the idea and what you did &nbsp; &nbsp; &nbsp; &nbsp; : D

You answer didn’t necessarily solve my problem, but when I used an external font you included I realized that the problem was with parcel’s parsing of JSON files

Thank you either way, I will reply to myself with the answer just in case someone faces the same issue

---

<div class="post-metadata">

**Author:** ![genzo](https://avatars.discourse-cdn.com/v4/letter/g/58f4c7/32.png) [@genzo](https://discourse.threejs.org/u/genzo)\
**Post date:** [March 10, 2022, 10:00pm UTC](https://discourse.threejs.org/t/unable-to-use-fontloader-or-textgeometry/35803/5 "2022-03-10T22:00:34Z")

</div>

If anyone faces the same problem in the future, it’s because of parcel’s JSON parsing and it’s inability to use static files for the time being

Here’s the best fix I found [GitHub - elwin013/parcel-reporter-static-files-copy: ParcelJS v2 plugin to copy static files](https://github.com/elwin013/parcel-reporter-static-files-copy)

---

<div class="post-metadata">

**Author:** ![pravesh\_arya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravesh_arya/32/35644_2.png) [@pravesh\_arya](https://discourse.threejs.org/u/pravesh_arya)\
**Post date:** [April 23, 2023, 1:29pm UTC](https://discourse.threejs.org/t/unable-to-use-fontloader-or-textgeometry/35803/6 "2023-04-23T13:29:40Z")

</div>

Still not working… Please HELP 😶

---

<div class="post-metadata">

**Author:** ![Rahul-ku-Mo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rahul-ku-mo/32/43247_2.png) [@Rahul-ku-Mo](https://discourse.threejs.org/u/Rahul-ku-Mo)\
**Post date:** [December 22, 2023, 12:35pm UTC](https://discourse.threejs.org/t/unable-to-use-fontloader-or-textgeometry/35803/7 "2023-12-22T12:35:58Z")

</div>

@pravesh_arya Try using this method to access the fonts.

```javascript
import HelvetikerFont from "three/examples/fonts/helvetiker_regular.typeface.json";

import { TextGeometry } from "three/addons/geometries/TextGeometry.js";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";

/ ****Rest of your code********* /
const loader = new FontLoader();
const font = loader.parse(HelvetikerFont);

const geometry = new TextGeometry("Hello three.js!", {
  font: font,
  size: 0.5,
  height: 0.2,
  curveSegments: 12,
  bevelEnabled: true,
  bevelThickness: 0.03,
  bevelSize: 0.02,
  bevelOffset: 0,
  bevelSegments: 5,
});

const material = new THREE.MeshBasicMaterial();

const text = new THREE.Mesh(geometry, material);
scene.add(text);

```