Creating Fonts

The JSON “font” file is created from an SVG file that contains the paths of the required characters.

Such an SVG file can be created using any vector editing software like Inkscape, Illustrator etc. Here I will be using Inkscape.

Step 1:

Open a blank document and using the Bezier Curve tool draw a long horizontal straight line. This line will act as a reference line for the paths.

Now we need to change the id of the line to baseline. On Inkscape, this is done by selecting the line and then Edit > XML Editor or Ctrl + Shift + X. This will open the below shown window.

Now click on id and then change its corresponding value (path815 in this case) to baseline and then click “Set”.

Step 2:

If you are tracing an existing font, use the text tool to type the required characters. Typing the characters in ASCII order will be helpful in the naming process.

! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~

Now use the move tool to position the text such that the baseline looks like an underline.

Example below, font used : Pacifico.

Now use the Bezier tool to trace the path.

Group each letter by selecting the path(s) and then Ctrl + G. Grouping has to be done even if there is only one path in the letter. For example, ! has two paths and ' has only one path.

Note: On Inkscape, while drawing perfect straight lines it is important to make the straight line a “curve” by using the Edit Path By Nodes tool (shortcut F12). To do this, simply click and drag the line and then move it back to the same position.

This is done because for straight lines, Inkscape uses the move to (M) command to create straight lines and in the JSON file creator, only one move to command is allowed which is at the beginning.

Step 3:

Once all the characters are drawn, select every element in the document (Ctrl + A) and then group them together (Ctrl+G).

Now select the group and open the XML Editor (Ctrl + Shift + X). Then change the id of the group to main as shown in step 1.

Save the document.

Step 4:

Go to the Font Creator page and upload the SVG file using the Browse button.

The page will find all the characters drawn in the SVG file and then show them in ASCII order. Check all the characters to see if they are named properly, if not edit the name by clicking on the menu button ⋮ . Naming can also be done by typing the order of the characters in the text box and then click “Name” button. The letters are also draggable so if there are only minor changes, drag the letters to its position and click on the “Name” button.

Once done click the generate button to download the JSON file.