投稿者: o6asan

　「自作 WOFF を作ってみた-#2。」の続きです。

　前回で， ttf ファイル(Untitled1.ttf)を手にしたので，これから， WOFF ファイルを作る。まず，サブセット化し，後に WOFF ファイルを作る。実のところ，できた ttf には 31 文字しか含まれていないのだが，それでもサブセット化すると小さくなったので，この作業もやる意味はある。

　ネット上に，結構いくつも， ttf から woff を作ってくれるサイトがある。例えば， Webfont Generator とか ttf to woff converter とか Font2Web とか。日本語に対応しているところもあるし，対応していないところもある。コマンドライン系のツールで， sfnt2woff などもある。しかし，今回，私は武蔵システムが配布している WOFFコンバータという Windows 2000／XP／Vista／7／8 でも Mac OS X 10.6 以降でも動くありがたいソフトを使った。彼らはさらに，サブセットフォントメーカーまで配布してくれている。ありがたく使わせていただいた。本当に，感謝に堪えない。

1. サブセットフォントメーカー と WOFFコンバータをインストール。
2. サブセットフォントメーカーを実行。   — Fig.1
3. ２が済むと， WOFFコンバータ が自動的に起動する。   — Fig.2

　以下の３つのファイルが作られる。
　　　　　・Untitled1_sub.html
　　　　　・Untitled1_sub.ttf
　　　　　・Untitled1_sub.woff

　Untitled1_sub.html をテキストエディタで開けてみれば，必要な css コードは分かる。

　私の目的は，この WOFF を ‘Sugar and Spice’ の子テーマで―これをこのブログのテーマに使っているのだが―使うことだから，必要な変更を style.css に書き加えた。現時点の子テーマの style.css を以下に載せておく。太字の斜字体部分が今回の変更点である。当然ながら WOFF ファイルは，サーバにアップロードしておかなくてはならない。
　で，ウィジェットタイトルは，どんなふうになったかというと，この記事の右上の画像のように変わったわけだ。 WOFF ファイルのサイズはわずかに 10.8KB である。まぁ，なんちゅうか，自己満足の世界だけどねぇ （エへへ）。

　任務完了!! 拍手うーーーーーー。

/*
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('Untitled1_sub.woff の URL を記入') 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;
}

追記(7/17)：
　みなさーん，いいお知らせです!! FontForge for Windows が普通に動くようになってるよぉ。現時点のバージョンは， 20-06-2014 みたい。

　「自作 WOFF を作ってみた-#1。」の続きです。
　やっと， FontForge が使えるようになったんだが， fontforge_cygwin-20090914.tar.bz2 くん，とにかく不安定。でもまあ，なんとか動く。 FontForgeSetup_2012-07-31_Windows.exe では，エラーが出たし， fontforge-20090923-1.i386.rpm は，さらに不安定だった。というわけで，ほかに道もなさそうなので， fontforge_cygwin で行く。 FontForge for Windows が使えるようになっているので，そちらを使ったほうが早い。追記参照。
　ところで， ttf ファイルの作り方を書いていくわけだが，ここを参考にする方がいたら，以下のことに留意しておいてほしい。手順通りにやれば，多分使えるレベルの ttf ファイルはできると思う。しかし，今回私が必要とするのは，大したものではないので，ちゃんとした ttf ファイルを作るために必要なことの多くを書いていない。もし，ちゃんとしたものを作ろうと思うなら，ご自分で更なる情報を集めていただきたい。手前味噌だが，一通り私の手順をやってみてからのほうが，下記のチュートリアルに書いてあることが飲み込みやすいと思う。
　FontForge についての詳しい話は，チュートリアルにあります。
 
**地道に #2**

1. cygwin を実行 (cygwin のショートカットをクリックする)。
   $ xinit   — 図１

   X の大きな窓が開く。
   [注] WOFF のために，作業フォルダを作っておいたほうがよい。名前は MyFont とでもして， cygwinhome<username> に置く。 Inkscape SVG はすべてこの中に入れておくと，後の作業に便利である。

2. $ cd MyFont
   $ fontforge -new   — 図２
   右上隅に新しい窓が現れる。
3. ***フォントの作成開始
   1. 日本語フォントを作るので，Reencode を使って JIS 212 (Kanji) にする。   — 図３
   2. ****半角文字の作成

      例として半角文字の “p” を作る。緑色にしてあるところをダブルクリックする。   — 図４
      さらに，別の窓が左側に現れる。   — 図５

   3. ‘Import’を使う。   — 図６
   4. ‘Image’ をクリックして，出てきたドロップダウンメニューから ‘SVG’ を選択する。   — 図７，図８
   5. p.SVG をダブルクリック。   — 図９
   6. ‘Close’ する。   — 図10
   7. “p” は半角文字なので ‘Metric Window’ を使って幅を縮めてやる。   — 図11
   8. 幅を ‘1000’ から ‘500’ に変更。   — 図12
   9. ‘Metric Window’ を閉じる。   — 図13
   10. ここまでの作業を sfd file (default: Untitled1.sfd) に保存する。   — 図14, 図15
       [注] FontForge がちゃんと動けば，ここでの保存作業必要ないのだが，うちの環境では，なにしろ，不安定だったので，こまめに保存した。
   11. [注] 半角文字を作るときは， ２(図４) から10(図15) の繰り返しになる。
        
   12. ****全角文字の作成

       全角文字の例として， “ン” を作る。全角文字を作るときは， ‘View’ → ‘Goto’ の機能を使う。文字の場所が見つけにくいからね。   — 図16

   13. “ン” を検索窓にコピー＆ペースト後，[OK]。うちの環境では，キーボードから直に “ン” の入力はできなかった。   — 図17
   14. 黄色くなっているところをダブルクリック。   — 図18
       図５から図８をやる。
   15. U+30F3.SVG をダブルクリック。   — 図19，図20
       [注] ‘U+30F3’ は’ン’のユニコードである。可能なら，ン.SVG とかのほうが便利なのだが，うちの環境では， FontForge 内では文字化けした。仕方がないので，半角文字でのファイル名になった。
   16. 窓を閉じる。   — 図10
   17. 前に作った sfd ファイルに，ここまでの作業を保存する。   — 図14
   18. [注] 作業を中断する場合は，図21，図22，図23 をやって， cygwin を抜ける。
   19. [注] 作業の再開時は， “fontforge -new” の代わりに， “fontforge 自分の sfd ファイル名” をタイプすると，前の sfd ファイルが使える。
   20. 必要な文字分，作業を繰り返す。最終的に，必要な glyph を含んだ sfd ファイルができることになる。
   21. さて， ttf を作る。   — 図24，図25
       [注] ‘Validate Before Saving’ のチェックは，外しておく。いろいろ，検査をしてくれるみたいだが，今の場合は，外しておいたほうが，無難です。
4. やっと， ttf ファイルができた。

　次回が，最終回になります。

　みなさーん，いいお知らせです!! FontForge for Windows が普通に動くようになってるよぉ。現時点のバージョンは， 20-06-2014 みたい。