How to use loadFont()?

[jaydar10]

Okay, so I'm making a Mario platformer template on Replit (obviously, using Kaboom.js), and when I made a game over screen, I found that I just didn't like the default font in Kaboom.

So I looked for a font, finding that I liked "Press Start 2P", however I have no idea what the src parameter on the loadFont() function wants from me.

I know it wants a .png, .jpg, or picture file of some sort, but what should in that file?

[jaydar10]

Okay, after looking at some more Kaboom games on Replit, I figured it out. The picture Kaboom is looking for is a screenshot of the .ttf file, and then, from what I know, you have to name it the same as the .ttf file itself, ex; if the .ttf file was called StupidFont-Norma.ttf, you'd name it StupidFont-Normal.png.

[lajbel]

Hey hi!

You are probably using the latest version of Kaboom, so the fonts work in png, you can perfectly load fonts that the width and length of the letters are the same in each character, something like a spritesheet.

Example:

loadFont("unscii", "/fonts/unscii_8x8.png", 8, 8); // each char has 8 of w and h

It is currently possible to use TrueType fonts in the latest next version of Kaboom. Check this example

On the other hand, you can use font2bitmap to convert a Google Fonts font to BitMap .png

[jaydar10]

Okay, I think my project is kind of just... cursed?
I swear my synax is correct, as I put in:

loadFont("pressStart", "/fonts/PressStart2P-Regular.ttf", 8, 8);
	const coinsLabel = add([
		text(coins, { font: "pressStart", size: 24, } ),
		pos(24, 24),
		fixed(),
	])

And I'd use the same syntax on the example, and that'd work. It's strange...