Tutorial: How to use extra fonts in costume/backdrop editor and some text tips too
-
NOTICE: This tutorial below works for both CreatiCode and Scratch (or any Scratch fork/mod like Turbowarp) because this doesn’t take advantage of any CreatiCode-specific features.
Tutorial difficulty: 3.5 out of 5 stars
Does it ever bother you that you’re limited in the fonts you can use when you use the costume/backdrop editor? Well I have a somewhat advanced hack that I’m going to teach you today to use fonts like Arial and whatnot. I’m also going to show you some text/emoji tips and tricks at the end which ties into this.
Step 1
First, in any project (preferably a new project or one of your own projects), open up the costume/backdrop editor, then make a new costume (or backdrop if you’re in the Stage).
Step 2
Now make a new textbox with some example text like “Hello World!” and then set the font to something like “Marker” or “Pixel” so it’s easily recognizable and hard to miss. For performing this trick, it would also be best if you just have this textbox as the only element/thing (which is why I had you make a new costume/backdrop so it’s just a blank canvas) since having anything more might make this a bit harder.
Step 3
Now, export your simple costume/backdrop by right-clicking on the costume and export.
Warning: Make sure that when you export, the file ends with .svg. If it isn’t, then that means you must have clicked the “Convert to Bitmap” button and you don’t wanna do that since it just rasterizes the whole thing - converts it to just pixels, which won’t let you change the text afterwards unless you make it all over again.Step 4
Now, import the SVG file of your costume/backdrop in a text editor app, like Notepad, or a web one. This will force it to show as text in a way that you can edit raw/directly.
Nerd info/fun fact: See, SVG images/vector graphics files are stored as text (if you wanna get technical, it’s XML text), not in pixels and complicated hex codes like PNG images. Therefore you can edit their contents more conveniently.
To make it easier for you, go to this text editor site: https://texteditor.co/
When you get there, ignore all the other junk like advertisements and hit the big blue button that says “Open File From Computer”.
Then select and choose the SVG file that we just exported in Step 3.
You should see this now:
Step 5
You see where it saysfont-family="Marker"? Well you can change that to get a custom font!
The way fonts work with Scratch/CreatiCode is that the SVG inherits the currently loaded fonts of the current webpage (HTML document) and browser/system, and that list shown at the beginning doesn’t do anything really special other than just use the name of a font, check if it’s supported and that the page/browser has it, and then put that font onto text.So now, try to replace Marker with any of these fonts below:
- Arial
- Arial Black
- Comic Sans MS, cursive
- cursive (if on Mac/Apple it’s actual cursive, elsewhere, it’s just Comic Sans)
- Garamond
- Verdana
- Tahoma
- Courier New
- monospace
- Wingdings (Wingdings)
- Roboto
- Google Sans (only available for chromebooks/google maybe)
- Calibri
- Lucida Console (windows only)
I’m going to choose “Roboto” but you can choose whichever one you want. Now download the SVG file from the text editor, and then import it into Scratch.
Step 6
If you followed the last step correctly, it should look like this:
Yayyyyy! You did it! So now you have custom fonts that you can use and you can also change what the text says and any other thing like that. This will now allow you to further customize your text and make it more unique.Tip: You can also use the “Scratch” font on any Scratch playground (including CreatiCode).
Rasterizing text tips (Step 7)
So you are probably already aware that emojis show differently for people on different devices, since those on Apple devices will see different emojis compared to Androids and same for other devices/platforms. Same applies to text fonts, since not everybody has the same fonts on their system!
You can fix this issue by flattening/rasterizing your text whenever you use emojis/uncommon fonts since some people probably won’t see certain fonts that you use and might be confused or feel misled when your game looks weird. You can do this by clicking the “Convert to Bitmap” button to just basically pixelate and unvectorize it:
You can then click this button again as it’ll say “Convert to vector” to turn it back into SVG which is what we like. You probably just want to rasterize your emojis and text so I recommend doing this in a new blank costume and then cutting and pasting the text back in to whatever costume you wanted like so the text is seperate from the background if you have colors or something.Everybody will see your text the same after you do this because it’s now pixels, not text made by the computer, so now everybody will see your text the same! However making doing this has some drawbacks, like for example, it will probably make some images very pixelated and have a poor quality/resolution which might suck if you have like some HD image, since Scratch isn’t equipped for such quality. You won’t have to worry about this very much when you’re using CreatiCode though, due to the widgets blocks which are a powerful tool and can display images normally.
Conclusion
I hope you enjoyed my tutorial and found it useful, I will also be porting a project I have on Scratch to here soon that contains “hacked” blocks and backdrops with the custom fonts from this tutorial. When that’s up, you can just skip all these steps and steal the costumes from there, and put 'em in your backpack to use in whatever projects you choose.
(Section below in construction; those tutorials are not written by me yet)
Extra tutorials that expand on this one:
If you wish to learn more of my techniques and methods, I have made more tutorials below:
- Expansion of this tutorial that tells you of the extra things you can do in CreatiCode only
- How to put in more fonts using Opera GX or a Chrome extension (and then rasterize so others can see it)
