Font Question for Game Lab

[mcmastersha]

How many font styles are available for Game Lab in the drawing tools? I count 5 under the documentation explanation, but was wondering if there were more that were not listed or a way to get more. Students were wondering:)

[mwood]

According to the documentation, you can use any web safe font (as displayed on W3Schools).

I haven’t tried others, but at least that’s a bit of variety.

Mike

[IMPixel]

As @mwood said, you can use any web safe font. That’s because GameLab runs on your browser client.
There actually is a way of loading other fonts that you can download but it’s way harder than just typing your font as a string. I actually even used it in my snake game Code.org
As you can see the font “snake” was typed in isn’t a regular font: It’s another font called “Lexend” and it’s available on fonts.google.com
But now, how to use any other font you want?

1. Download a ttf or otf font, you can download it from dafont or google fonts, your choice.
2. Now, rename the extension of the font to .png so code.org allows it. (For example if the name of your font was lexend.ttf you need to rename it to lexend.png). Windows will give you a warning that renaming the file may make it unusable, but just ignore that, since the data of the font is still in that file.
3. Load the font using the code.org assets tool by clicking the settings icon in the editor and then pressing “Manage Assets”
4. The next few parts are to do in your code. In the beginning of your code, type yourFontVariable = loadFont("https://studio.code.org/v3/assets/channelid/filename.extension") where channelid is the id of your project. You can find it by looking at the link of your project:
   
   
   
   filename.extension is the name of your file.
5. Now, you can use this font by using p5.js’ textFont() function. You simply put yourFontVariable as the only parameter in textFont() (if the name of the variable you assigned is yourFontVariable), like this: loadFont(yourFontVariable).

There’s sadly a weird consequence to using this method: Sadly, there is a weird bug that happens when you try to switch to another font that’s not the one you loaded that makes you almost unable to change some of the other text properties like textSize and textAlign. However this will only happen in that case, so if your whole project uses only one font, you should be fine.
Oh and credits to @infinitestasis since he’s the one that came up with this method.

[emily.kosmack]

This is really useful! I was able to make your method work once, after some troubleshooting, and now can’t recreate correctly. (have tried a dozen times)

Any advice? Here’s some evidence: Program (not working)

My Assets:

My Filename:

[emily.kosmack]

Here’s the time it did work, for reference.