Creating Fonts with Inkscape and FontForge | Part#1

Table of Contents - <Part#2>

Part#1 - Simple Alphabet
In this tutorial, we create simple font, and introduce core concepts of both Inkscape and FontForge.

1. Creating a new project

   1. Open FontForge and select new
   2. Go to Element|FontInfo.
   3. Double click Fontname to select it and type "Font#1" (all the names should change) then validate OK
   4. Do File|Save as... and save the file in a directory (such as " .../Font#1/Font#1.sfd ")

2. Drawing the glyphs

   1. setup
      1. Open Inkscape to create a new document and save it in the same folder as the .sfd file
      2. Open File|Document properties|Page. In the box Custom size set Units=px, Width=500, Height=500.
      3. Open File|Document properties|Grids and create a new rectangular grid with SpacingX=25, SpacingY=25
      4. Close Document properties
   2. drawing
      1. Read this guide on how to pan and zoom in Inkscape.
      2. Draw a Rectangle (F4) in the background like this, it will be your baseline. You can remove it's border by right-click Fill and stroke|Stroke Paint and click the cross. To change the color to a light transparent one, Fill and stroke|Fill change it's opacity and use the color wheel.
      3. Using the Draw Bezier (Shift+F6) tool in mode Bezier Path, draw some simple letters.
      4. Once the shapes of your letters are closed, color them by adding a Fill color (flat color). Here's what they might look like. If your letters are made of multiple shapes, select them by holding shift and combine them with Path|Union.
      5. The last thing to do before importing the glyphs is to remove their stroke. Select them and do: right-click|Fill and stroke|Stroke Paint->click the cross.

3. Importing the letters in FontForge

   1. In FontForge go to Element|Font Info...|General.

   2. Set Ascent=325, Descent=175, Em Size=500

      This is what Ascent and Descent corresponds to : picture. Em Size is the sum of the two, you can read more about em-sizes here.

   3. Try copying a glyph and pasting it in an empty cell in FontForge. It will appear in the top left hand corner like this. You can select all the points and drag the letter back onto the baseline.

      Tip: If you had done precise positioning in Inkscape and don't want to lose it, copy the letter AND a small rectangle like this before copy pasting it, then delete the rectangle from FontForge and voila!

   4. Copy all the letters into FontForge : picture.

      Tip: There seems to be a bug where, upon copying something inside of FontForge, it sometimes becomes impossible to paste anything from Inkscape afterwards. If this happens to you, closing and reopening FontForge should fix this.

4. Set the bearings

   1. There are two ways to do this. Open each glyph and manually drag the two vertical bars close to the letter like this.
   2. You can type the name of other letters in the text box to preview them together and choose the ideal spacing. Simply click the letter you want to edit on the screen.
   3. An automated way of doing this is to select multiple letters, and choose Metrics|Set both bearings set both bearings to 20. If you had precise positioning going on, this might break it.

5. The glyph "space"

   1. The last thing to do is create the glyph for "space" (Hexadecimal number 0x20). Select the empty glyph and Metrics|SetWidth to 100.

6. Generate the font

   1. Do File|Generate Fonts... as " Font#1.ttf " in TrueType OR " Font#1.otf " in Opentype (CFF). Options should be set to Hints+FlexHints+TrueTypeHints+Opentype+PSGlyphNames+LookupNames.

      If you checked validate before saving You will get an error "Non standard Em-Size", standard sizes are 1000, 1024 and 2048. The first is a convention, while the other two are linked to another error you will get : "Non Integral coordinates." In order to save space and reduce file sizes, it is common to round all coordinates to integers, hence the standard 1024 and 2048 sizes being powers of two. You can forget about these errors and generate anyway.

   2. Install the font, and preview in Libreoffice Writer. Other software may not support all the features our fonts will be using in other tutorials. (PS: You may need to delete the font before installing it, if you already installed it once before).

   3. Result.

Table of Contents - <Part#2>