PicoLudi - Create your own font
Facebook Twitter Gplus RSS
magnify
Home Development Create your own font
formats

Create your own font

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.

Type Light

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

1)  2)

  • 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:

Finalization

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:

Conclusion

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.

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
2 Comments  comments 

2 Responses

  1. picoludi

    Après une nouvelle lecture, je me souviens pourquoi je n’ai pas testé FontForge: “I no longer provide binary packages, only source packages. So sourceforge may try to give you an out of date binary. Don’t take it, insist on source.”

  2. picoludi

    I remember why I did not test FontForge: I no longer provide binary packages, only source packages. So sourceforge may try to give you an out of date binary. Don’t take it, insist on source.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WordPress.org - Theme based on iFeature