`a-text` custom font broken

[juunini]

Description:

• A-Frame Version: 1.3.0
• Platform / Device: MacOS M1 air, browser: Chrome, Firefox, Safari

Issue:

I use under code

<a-text
  value="Hello"
  color="black"
  width="0.5"
  height="0.5"
  position="-0.125 0.03 0"
  font="/SpoqaHanSansNeo-Regular.json"
  font-image="/SpoqaHanSansNeo-Regular.png"
></a-text>

and cause this issue

I was make font here: https://msdf-bmfont.donmccurdy.com/ and use this font: https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.ttf

[dmarcos]

Can you provide a full runnable example? Glitch is great https://glitch.com/edit/#!/aframe

[juunini]

https://codesandbox.io/s/laughing-tess-9zmwy?file=/src/App.js

[dmarcos]

I tested with the default font from Don's tool at it works as expected

https://glitch.com/edit/#!/thundering-numerous-trawler?path=index.html%3A8%3A28

[dmarcos]

There must be something particular with your font. The site is an old THREE version. That might make a difference

@donmccurdy Do you see anything particular about the font that @juunini is using? Default font in the site works fine with A-Frame 1.3.0. Thanks so much!

[donmccurdy]

These issues are probably worth keeping an eye on; three-bmfont-text may not work in a WebGL 2 context without changes:

• https://github.com/donmccurdy/msdf-bmfont-web/issues/19
• https://github.com/Jam3/three-bmfont-text/issues/38

But that doesn't really look like the issue above, if there are no GLSL compile errors here...

I made a fork of the Glitch, using an MSDF font made from the same TTF file, and it seems to be working fine there:

https://glitch.com/edit/#!/polar-jealous-grandiflora?path=custom-msdf.json%3A1%3A117

I can't see what would be different about the codesandbox vs. the glitch demo, though. The font itself seems OK.

[dmarcos]

@donmccurdy Thanks so much for jumping on it so quickly.

Yeah it doesn't seem to be a problem with the shader.

Sorry, I think I make it a bit confusing. On the glitch I shared I'm using https://msdf-bmfont.donmccurdy.com/ exporting the default font:

https://glitch.com/edit/#!/thundering-numerous-trawler?path=index.html%3A8%3A28

@juunini code sandbox uses the SpoqaHanSansNeo-Regular font referenced in the issue:

https://codesandbox.io/s/laughing-tess-9zmwy?file=/src/App.js

Both are using A-Frame 1.3.0. The only different seems to be the font used.

[donmccurdy]

If the same .json and .png files from @juunini's demo are plugged into the Glitch you shared earlier, they work correctly:

Archive.zip

So I think there's some other difference – perhaps codesandbox, React, or something else?

[juunini]

I found this issue in Next.JS project. And, React is too.

And now, static html too. https://codesandbox.io/s/stupefied-cookies-u8563?file=/index.html

text-broken-sample.zip

See this local project. this static HTML project text broken too.

[juunini]

I was think "if font is trouble?" and I use other font Nanum Barun Gothic font.

NanumBarunGothic-msdf.zip

But, it is also cause same issue.

[dmarcos]

@donmccurdy Sorry to bother you again. I might be doing something wrong. This is @juunini font plugged into the Glitch above

https://glitch.com/edit/#!/reminiscent-opposite-dogsled?path=index.html%3A8%3A49

It doesn't seem to be rendering for me.

[smeybi]

Not sure if there is a connection with this issue: I also have a font issue with Aframe 1.3 and Fonts. The aframe-htmlembed-component in the glitch script doesn't matter! The embed font
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> is the problem.

Aframe 1.2 works with font embed (google font --> stylesheet link href). Aframe 1.3 works without font embed (google font --> stylesheet link href).

Aframe 1.3 doesn't work (doesn't show it) with font embed (google font --> stylesheet link href). Console: WebGL warning: texSubImage: Offset+size must be <= the size of the existing specified image.

You can remix and change to Aframe 1.3, remove the font link and it works. https://glitch.com/~aframe-1-3-font-issue

Hope the information helps.

Update: I found out, it's not the error message! It's the loading process. In my example on local computer with local fonts (not with external link). If i delete the cache, the first load doesen't work. The second load works and the following ones until I clear the cache. With Aframe 1.2 i don't have this issue, it works always. The weird is, when I embed the link (<link href....) in the head, it doesn't work anymore, even though I don't use the font.

[Atlinx]

Using shader="msdf" on my a-text fixed this issue for me.

[Roxcsas]

Using shader="msdf" on my a-text fixed this issue for me.

I also had problems with custom fonts and this with negate="false" fixed it.