前回で, 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 以降でも動くありがたいソフトを使った。彼らはさらに,サブセットフォントメーカーまで配布してくれている。ありがたく使わせていただいた。本当に,感謝に堪えない。
以下の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 みたい。
This website uses cookies.