How do I select font-weight in troika-three-text?

[Ashvith10]

I want to use the weight "black" for Cantarell, but I'm unable to figure out how I can do the same...

[lojjic]

You need to use the font file that contains that weight.

[Ashvith10]

@lojjic thanks for answering. For some reason, I'm not able to grasp this: why does the font Cantarell have five different states of weight, despite having only two sizes (Regular and Bold) normally? I am not able to make my text thicker than what's rendered normally on the HTML page?

Size 100 and 200

Size 300

Size 400 and 500

Size 600 and 700

Size 800 and 900

Meanwhile, for the 3D text:
Regular

Bold (700)

How can I access the other states of weight?

[lojjic]

I don't think I have enough context to answer your question. I only see two weights for Cantarell on google fonts. Is some other tool showing you intermediate weights?

[Ashvith10]

You're right @lojjic , there are only two weights. But HTML can apparently create five magically. Well, I wanted to understand if I could also do the same with just two files for a 3D text?

[lojjic]

Ah, well, the answer to whether it can do that sort of magic is no. ;)

I'm unaware of that magic though. A quick test changing the font-weight with devtools on https://fonts.google.com/specimen/Cantarell doesn't show anything but the two main weights. I tested Firefox, Safari, and Chrome on Mac.

[Ashvith10]

My previous comments were a little misleading. The browser is using the Cantarell Regular font (to be entirely accurate, system-ui), and doing some magic behind the scene.

There's no involvement of Cantarell Bold here. All of this has to do with algorithmic bolding. This behavior is very inconsistent between different browsers. Perhaps I'll look for a font that has all the weights available.