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

Update information      Edit(Jul.17)

Widgets Title on English blog   One of the reasons I chose the Theme “Sugar and Spice” was its Widget title design. Originally, it also provides the same design for blog titles though I don’t use this feature for the title. The name of the font for the designs is Niconne. It is available on Google Fonts and we can use it by this instructions.

Widgets Title on Japanese blog   After changing my Theme to “Sugar and Spice”, I suddenly found the Niconne includes only Latin font. On my Japanese blog the Widget titles are like the right image. Oops. Its Japanese font is dry and boring. Besides, what fonts are used depends on the visitors’ PC environment. Only “w” and “p” are displayed by the Niconne. I don’t like this.

   So I was looking for a Japanese WOFF instead of Niconne, but I couldn’t. At this point, when we use WOFFs of Japanese fonts, we have some specific difficulties. In Japanese texts we use various kind of characters than in Latin texts. A Japanese font file at least contains about 7000 characters. So the size of Japanese font files are much bigger and to create a Japanese font file needs harder work than to create a Latin one. Therefore, to find a free Japanese WOFF is difficult. To use a free Japanese WOFF is also inconvenient because the display of the blog slows down due to its size. Time that gives technology improvements will resolve this issues. But then, I was in trouble.

   Hence I decided to create a WOFF file from my own handwriting. Because I need only 31 characters for my Japanese blog Widget titles(最近の投稿広告コメントタグアーカイブテゴリ日本公式キャラクwp). So, I don’t need a full WOFF of Japanese. Besides, no license problem they have if I make them by myself d(^o^).

   Now, I’ll begin.

**Step by step**

  1. I wrote 31 funny letters by my hand like this ☞ . Ha ha ha.
  2. Scan my handwriting and save it as a png file. If your scanner doesn’t have a saving feature as png files, you need an images converter to make a png file. Of course you can use Inkscape as the converter.
  3. Modify each character to each ping file (1000 pixels x 1000 pixels). Only “p” and “w” are 500 pixels x 1000 pixels.
  4. All this ping files are bitmap image files, so I need to change them to vector image files. Download inkscape-0.48.4-1-win32.7z for my Windows8 x86.
  5. Extract inkscape-0.48.4-1-win32.7z to an appropriate place.
  6. Run inkscape.exe.
    1. Open one of the png files. Click on the image to focus.
    2. To trace a bitmap, call up the Trace Bitmap dialog (Path → Trace Bitmap). Click [OK]. Close the Trace Bitmap dialog.
    3. Simplify path (Path → Simplify). Save it as an Inkscape SVG file.
    4. Rotate rule.Repeat 1-3 about all png files.
      [Note] If you need to create a vector image by manual, keep this in your mind. When you draw outline of the glyph, you do always see the glyph body at the right side and the empty area at the left side. See the right image.
  7. Download setup-x86.exe (32-bit installation) See the edit. You can use FontForge for Windows.
  8. Install cygwin by following FontForge install procedures for cygwin under MS Windows. Actually, I installed and ran FontForgeSetup_2012-07-31_Windows.exe before this. But, unfortunately it didn’t work well on my Windows8 x86.
  9. Run setup-x86.exe.
    • At “Choose A Download Source”, Select “Install from Internet”.
    • At “Install For”, select “All Users”. Avoid the folder that name includes spaces, for example “Program Files”.
    • At “Internet Connection”, select “Direct Connection”.
    • At “Choose A Download Site”, chose a server you prefer.
    • At “Select Packages”, change X11 preference from “Defalt” to “INstall”.
    • Now, install.
  10. Download fontforge_cygwin-20090914.tar.bz2.
  11. Move fontforge_cygwin-20090914.tar.bz2 to cygwin\home\<username>.
  12. Install FontForge.
    Open a cygwin window (by clicking on the cygwin icon).

    1. $ bunzip2 fontforge_cygwin-*.tar.bz2
    2. $ tar xf fontforge_cygwin-*.tar
    3. $ cd fontforge
    4. $ ./doinstall
    5. $ cat >> ~/.bashrc
      PATH=${PATH}:/usr/local/bin ; export PATH
      MANPATH=${MANPATH:-}:/usr/local/man ; export MANPATH
      export LANG=ja
    6. $ exit
  13. Download mplus_bitmap_fonts-2.2.4.tar.gz.
  14. Move mplus_bitmap_fonts-2.2.4.tar.gz to cygwin\home\<username>.
  15. Open a cygwin window (by clicking on the cygwin icon).
    1. $ tar zxvf mplus_bitmap_fonts-2.2.4.tar.gz
    2. $ cd mplus
    3. $ ./install_mplus_fonts
    4. $ cd ..
    5. $ cat >> ~/.bashrc
      xset fp+ /usr/X11R6/lib/X11/fonts/mplus
    6. $ exit

   Now, I can use FontForge.

**Ref. URLs
   FontForge install procedures for cygwin under MS Windows (The original page does not exist anymore. This is Internet Archive’s. – 2014.11.7)
   FontForgeを使う (Japanese)


   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.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.