Categories
WordPress

To create a WOFF file from my own handwriting-#2.

同一記事の日本語版
Update information      Edit(Jul.17)

   Continued from “To create a WOFF file from my own handwriting-#1.”.

   Now, I can use FontForge. By the way, the fontforge_cygwin-20090914.tar.bz2 on my Windows8 Pro x86 is very unstable. But it works. FontForgeSetup_2012-07-31_Windows.exe didn’t work and fontforge-20090923-1.i386.rpm was more unstable than fontforge_cygwin-20090914.tar.bz2 on my system. There is no turning back. So, I use the fontforge_cygwin. See the edit. You can use FontForge for Windows.
   I first write about creating a ttf file, but note the following points. To follow my procedure probably you have a ttf file and it possibly works. But I do not mention a lot of information to create a full ttf file. So if you want to make a decent ttf file, learn about it by yourself after my method confirmed. You can find more information on Tutorial.
 
**Step by step #2**

  1. Open a cygwin window (by clicking on the cygwin icon).
    $ xinit   — Fig.1

    I have X in a large window.
    [Note] I think you’d better make a working folder for your WOFF. The folder is named MyFont or something like that and placed in cygwinhome<username>. You save your Inkscape SVG files to the folder, which is convenient for your rest work.

  2. $ cd MyFont
    $ fontforge -new   — Fig.2
    I have a new window at the right top corner.
  3. ***Starting to create a font.
    1. I create a Japanese font, so I use a re-encoding feature (JIS 212 (Kanji)).   — Fig.3
    2. ****Creating a half-width character.

      At the first, I make “p” as a half-width character example. Double clicking on the green area.   — Fig.4
      I have another window.   — Fig.5

    3. Use ‘Import’.   — Fig.6
    4. Click ‘Image’ and choose ‘SVG’ from the drop down menu.   — Fig.7, Fig.8
    5. Double click p.SVG.   — Fig.9
    6. Choose ‘Close’.   — Fig.10
    7. “p” is a half-width character, so Use ‘Metric Window’.   — Fig.11
    8. Change the width from ‘1000’ to ‘500’.   — Fig.12
    9. Close ‘Metric Window’.   — Fig.13
    10. Save all I made as a sfd file (default: Untitled1.sfd).   — Fig.14, Fig.15
      [Note] Usually, we don’t need saving at this point, but my FontForge is very unstable. So, I saved all at the point every time just to be on the safe side.
    11. [Note] If you make half-width characters, repeat 2(Fig.4) -10(Fig.15) about all half-width characters you want to make.
       
    12. ****Creating a full-width character.

      I make “ン” as a full-width character example. When making a full-width character, use ‘View’ → ‘Goto’ feature because the finding character place is difficult.   — Fig.16

    13. Copy & paste “ン” in the search form and [OK].   — Fig.17
    14. Double clicking on the yellow area.   — Fig.18
      Repeat from Fig.5 to Fig.8.
    15. Double click U+30F3.SVG.   — Fig.19, Fig.20
      [Note] ‘U+30F3’ is the Unicode for ‘ン’. If available, ン.SVG is convenient for its file name, but, unfortunately this directory menu does not show full-width characters correctly on my system. So I use half-with characters as SVG file names.
    16. Close the window.   — Fig.10
    17. Save all to the sfd file which I made when I created the character “p”.   — Fig.14
    18. [Note] If suspending your creation, do Fig.21, Fig.22, Fig.23.
    19. [Note] If resuming your creation, type “fontforge YourFont.sfd” instead of “fontforge -new”.
    20. Repeat the work above about the characters I want to create. After that I have a sfd file which contains all glyph I want.
    21. Generate and save a ttf file.   — Fig.24, Fig.25
      [Note] Unchecked ‘Validate Before Saving’.
  4. Finaly, I have the ttf file I want.

   The next post I will write how to make a subset file.

Edit(Jul.17):

   Hey guys, I have good news for you. Now, we can use FontForge for Windows with no pains. At this time, its version is 20-06-2014.