カテゴリー
WordPress

自作 WOFF を作ってみた-#3。

The same article in English
投稿アップデート情報  追記(7/17)

New Widgets Title on Japanese blog 「自作 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. 2が済むと, WOFFコンバータ が自動的に起動する。   — Fig.2

 以下の3つのファイルが作られる。
     ・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 みたい。