How to easily create Fonts for CraftStudio

In its latest release, CraftStudio introduced the TextRenderer component and the Font asset (among many other things).

The Font asset is basically a grid of characters and may seems tedious to create because you have to manually place all the characters precisely on the fixed grid then set the width of each of them for rendering.

Hopefully some tools and a little bit of cleverness can help us out a lot. The overall process may involve quite a few steps but all are quite easy and fast to do.

I will explain two ways, both have the same goal which is to create a .png image that you simply copy and paste in CraftStudio’s Font editor.

First way : Inkscape

create_font_inkscapeIt’s the way Elisée used to create the two demo fonts Russo One and Titilium Web. He explains it in this post on the CraftStudio’s community forum.

Basically, he used Inkscape to create a grid of characters with the correct spacing. You can download the .svg file of the grid then edit it with any text editor (something like Window’s Bloc-notes or Notepad++, not Word) and search/replace the font name (Russo One for instance) by the name of the font you want to use.

Once this is done, open the file in Inkscape (if all you see is an empty box, this is because the characters are white, like the background). You may then edit the characters as you need them (adding shadows or other effects for instance). Changing the color is simple : just select all the characters then pick the color with the wizard at the bottom of the window.

create_font_inkscape_exportOnce you are happy with how the font looks, you need to export it as a .png. Just go to the File menu then Export Bitmap then click the Export button. Copy the .png you just created and paste it in the font editor in CraftStudio. If needed, adjust the characters (and texture) size to a width of 32 and a height of 48.

If your system does not possess the font you would like to use, just read the paragraph “Adding any font to your OS” below.

Inkscape is free and cross-platform.

Second way : generating the .png from a font file

windows_fontFirst download this tool : Windows Font to PHP Font. It only works on Window but if you are aware of such a tool for Mac or Linux, please let me know.

It lets you pick a font, style it (bold, italic,…) and set a height and width for the characters. Once you did that, click on the Save to file button to create a .gdf font file.

Now use this online font converter. Select the .gdf file you just created on your computer, then select the color of the font. Finally click on the Create image button. The image will appear at the bottom of the page, copy it then paste it in CraftStudio.

If the transparent background appear black in CraftStudio repeat the process but check the Magenta Background box. This solution won’t work if the characters have semi transparent parts because they will be tainted with magenta. In this case, leave the background transparent, copy the image in an image editing tool (instead of CraftStudio), then save the image as .png then copy and paste in CraftStudio.

Adding any font to your OS

Inkscape or the “Windows Font to PHP font” tool only uses the font that are installed on your operating system but installing a new font on your system is really straightforward : on Windows 7 (I don’t know how it works on Mac or Linux), you just need to download a .ttf font file, right-click on it then click Install. The font became usable by Inkscape or any other software that uses the system’s fonts.create_font_google_font

You may find thousands of fonts available to use for free online, and most of the repositories lets you download the .ttf file.

Here is an example with Google fonts : find your font, add it to your collection then click the arrow in the top-right corner of the page and click on Download the font families in your Collection as a .zip file.

Setting the character boxes

Once your texture and grid are setted up, you still need to set each characters boxes (the character width when they are displayed by the TextRenderer). There is no automated ways to do that but you can save yourself a lot of work by copying the an existing font.

Replacing the texture won’t change how the character boxes have been setted up for the previous font and if the two fonts are not too different, all you will have to do is adjust some of the boxes.

Comments are closed