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

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

   Now, I have the ttf file(Untitled1.ttf) I want. First I’ll make a subset from the ttf file. Actually my ttf file only contains 31 glyph, nevertheless, the subset file is smaller than the original file. So, this work is worthwhile. Second, I’ll make a WOFF file.

   You can find some sites which create WOFFs from ttfs. For example, Webfont Generator, ttf to woff converter, Font2Web, and so on. Some of them can convert full-size characters as well as half-size characters, others cannot. You are able to use command line tools like sfnt2woff. But I found a tool named WOFFコンバータ and can use it on Windows 2000／XP／Vista／7／8 and Mac OS X 10.6 or later. Besides, they distribute a subset font maker named サブセットフォントメーカー, which also works on Windows 2000／XP／Vista／7／8 and Mac OS X 10.6 or later. So, I’ll use it. I greatly appreciate their tools.

1. Install サブセットフォントメーカー and WOFFコンバータ.
2. Run サブセットフォントメーカー.   — Fig.1
   
   Explanations of words:
   参照　<---　Browse. 作成元フォントファイル　<---　It means "Original File Location & Name". 作成後フォントファイル　<---　It means "Subset File Location & Name". フォントに格納する文字　<---　It means "What characters you want the Subset file to include". 書体名を変更する　<---　Change Font Name. IMPORTANT!! If a font on your system has the same name, it might be affected by this font.
   作成開始　<---　Make Subset
3. After 2, WOFFコンバータ runs automatically.   — Fig.2
   
   Explanations of words:
   サンプル文字列　<---　Characters for @font-face Demo 変換開始　<---　Convert to WOFF.

   When this work ends, the tools give me next three files.
　　　　　・Untitled1_sub.html
　　　　　・Untitled1_sub.ttf
　　　　　・Untitled1_sub.woff

   If you open the Untitled1_sub.html by a text editor, you can find the css code you need.

   In my case, I created the WOFF to use for the my Japanese blog Theme which is a child Theme of ‘Sugar and Spice’. So I added the css customization for its style.css. Here is my current style.css in the child Theme folder. Bold and italic parts are new additions. Of course, you have to upload the WOFF file to your server.
   Then the Widget Titles on my Japanese blog have changed their design. See the top image of this post. The WOFF file size is only 10.8KB. Now I have satisfied my own ego trip ha-ha-ha.

   Mission complete!! Clap, clap.

/*
Theme Name: J blog
Theme URI: http://webtuts.pl/themes/sugar-spice
Description: sugarspice Child Theme
Author: Aleksandra Laczek
Author URI: http://webtuts.pl
Template: sugar-and-spice
Tags: light, white, gray, two-columns, fixed-layout, responsive-layout,
custom-background, custom-menu, featured-images, theme-options, threaded-comments,
translation-ready, full-width-template
Text Domain: sugarspice-child
*/

@import url("../sugar-and-spice/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */
@font-face {
font-family: 'MyFont';
src: url('Exact URL to Untitled1_sub.woff') format('woff');
}

body {
color: #000;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
color: #000;
}

/* Calendar Widget */
table th,
table td{
color: #000;
background: transparent;
border: none;
text-align: left;
}

.widget-title em {
font-family: 'MyFont';
font-size: 26px;
font-style: normal;
padding-left: 3px;
}

/* 07. Forms & buttons
================================================== */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
color: #000;
}

/* #Forms */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
textarea,
select {
color: #000;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
color: #000;
}

label span,
legend span {
color: #000;
}

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.