「自作 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 以降でも動くありがたいソフトを使った。彼らはさらに，サブセットフォントメーカーまで配布してくれている。ありがたく使わせていただいた。本当に，感謝に堪えない。
以下の３つのファイルが作られる。
・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 みたい。
テーマを “
間抜けな話だが， Niconne にはアルファベットと数字しか入っていないので，日本語ブログのほうの表示は，右図のようなことになってしまった。無味乾燥だし， wp だけが Nicconne なので，余計変に思える。日本語表示のほうは当然ビジターの環境に左右されるわけだ。これは，ヤダ，と思った。
1-3 を png ファイル分繰り返す。
備忘のために雑記をチョコチョコと。