Always seeking for free resources for my apps (for now, YaMeMo) I spent some time searching for free custom fonts, corresponding to the graphical themes of my app.
You can find lots of them on sites like daFont or 1001fonts, but if you look closely at the licence terms (usually a readme.txt coming with the font), you realize that you cannot use them. Fortunately, you can make your own font, without having to purchase a costly software.
After reading this article, and wanting to make true type fonts on Windows, I tested Type Light. Other programs in this article seem to be worth the try, I’ll probably have a look at them during my next development phase.
For my first try, I made a very simple font, the pixelated font of the invaders theme:
Here are some steps/tips of the font creation with Type Light.
- The main elements of the user interface are the control bar, the toolbox and the mapping window. The first step is to create a new glyph from the control bar:
- In the View menu, choose to show grid and snap to grid (only applies to my very square font)
- choose the pencil from the toolbox
- Start drawing the shape of the character. For a square font like mine, make it by successive simple clicks. For a more curved font, you can drag the mouse at each vertex to create smooth curves. This creates control points that can be adjusted like in InkScape
- The green control line can be adjusted to indicate the spacing between this character and the next one in a word. Other control lines (dashed) indicate top of the lower case, upper case letters, and the bottom line of some letters (g, j …)
- Note that the “snap to grid” option does not work while drawing(1), you have to move each vertex to get the desired effect.
- The next step is to choose the character in the mapping window and click “map” (2). You can see that your shape is assigned to a character in the table
- It’s possible to use the same glyph mapped to several characters. This can be useful if you don’t want to distinguish upper case and lower case, or if you want to have accentuated characters without too much work
- For characters with “holes”, I recommend putting the “preview fill” option on in the “View” menu. To make a hole, simply draw a new contour over the first one. If the whole thing is filled (left image below), select the hole contour and choose “reverse” from the contour menu(right image):
- Unfortunately, there is a small bug: In some cases, an unwanted curve control point is generated. You don’t see it in the editing window, but you see the distorted shape in the mapping window. If this happens, you have to look for the corresponding vertex and adjust the control point manually:
Once you have all your characters ready, a simple “save as” is required to generate your ttf file. On Windows you can double click your ttf file, and then click “install” to install your font and use it in software like InkScape.
Integration into your Android application
Your .ttf files go into the assets/fonts (not res/fonts) folder. In your application, you can create a Typeface object and use it with the following code:
Typeface typeface = Typeface.createFromAsset(context.getAssets(), "fonts/"+fontName);
This free tool is quite efficient for a simple font like my “pixelated” font, and I’m happy to have found a tool to build my own fonts (beeing obsessed with copyright/license issues). However, you have to know what you are doing, and with some bugs, I’m afraid that the operation gets frustrating quite easily. I’ll try other free tools for my next works, or the full version of this one, that comes with auto trace and SVG import.