Unable to use custom font

vasturiano / react-globe.gl

React component for Globe Data Visualization using ThreeJS/WebGL

https://vasturiano.github.io/react-globe.gl/example/world-population/

MIT License

897 stars 155 forks source link

Unable to use custom font #20

Open benjaminlim00 opened 3 years ago

benjaminlim00 commented 3 years ago

Describe the bug I am unable to use custom font

What I have tried I have used this website: http://gero3.github.io/facetype.js/ and generated a typeface json file from an otf file I had

I then did this: import customFont from './telegraf_regular.json';

However it seems the font is distorted, eg. text appears blocked out

Screenshot from 2020-11-13 17-14-52

Could it be that I require some sort of text-loader?

vasturiano commented 3 years ago

@benjaminlim00 the fact that some characters look fine but others don't, makes me think whether your typeface may be missing support for some characters.

If there was something wrong with the integration, you would probably not see any text.

You can test your faceType loading mechanism with a different font, for example: https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/fonts/optimer_regular.typeface.json