ホームページのデザイン変更に合わせて幾つか新しいことにチャレンジしてみた。
その一つがWebフォントの使用。
ホームページのヘッダー部に表示している題字『和魂洋才徒然日記』に、SIMOさん謹製『青柳隷書しも』フォントをWebフォントとして使わせて頂いた。
（ブログの題字は別のフォントを使用してみたいと思い、現在作者の方に連絡中です）
隷書体の味わいのある文字がよく、ヘッダー部の背景に使った画像とマッチしていてとってもいい雰囲気を醸し出している。
特定のフォントで文字を表示したい場合、これまでだと文字を画像ファイルとして作成し画像として表示する方法が取られていた。
しかし、画像だと画面が拡大・縮小された時に文字の滑らかさが失われギザギザに表示されてしまう恐れがある。
スマートフォンやタブレット端末での閲覧が増えているのでページを拡大・縮小表示する事は多々有るうえ、Retinaディスプレイと称する高精細な画面で見ると通常のPC画面ではキレイに見えている画像がとっても粗い画像に見えてしまうと言う問題もある。
またSEOを考えた場合、サイトタイトルが画像で表示されているよりは文字としてHTMLに書かれている方がいいように思われる。
対策方法としてスタイルシートを駆使して文字は表示エリア外に飛ばし、背景画像としてロゴを表示させると言った方法も取られているが、文字を表示エリア外に飛ばすとかフォントサイズを0pxにして人間に見えないようにする手法はSEOスパムとして認識される可能性があり、あまり良くないように思える。
更には、Webフォントを使って表示させることで文字の修正や大きさの調整などは、テキストの編集、スタイルシートの修正で容易に行えるといった利便性もある。
いろいろ良いことずくめのWebフォントだが、問題もある。
それは、利用者にフォントをダウンロードさせないといけないと言う事。
ダウンロードさせるに当たって考慮しなければ行けない点が2点ほど考えられる。
一つは著作権の問題。
フォントは著作物なので勝手にサイト上でダウンロードさせる訳には行かない。
更に次に述べる2点目の考慮点に関連してフォントのサブセット版を作成しているが、これはフォントファイルから特定の文字を切り取って新しいフォントを作る行為と考えることができるため、著作物の改変にあたる可能性がある。
今回は作者のSIMOさんのご了解を得ることができたので青柳隷書しもフォントのサブセット版を作成し、使わせて頂いた。
二つ目の問題はデータ容量。
青柳隷書しもフォントの元々のファイルサイズは約2.5MBある。
光回線などの広帯域ネットワークを使っているPCであれば全く気にならない容量だが、3G回線を使っている端末だと少々重い気がする。
それに、たった8文字のために3000文字分ものフォントをダウンロードさせるのは無駄が多すぎる。
最近ではサイトの読み込みにかかる時間もSEOに影響するという話があるので、時間短縮は大事なんだと思う。
と言う訳で、使用する8文字分を切り出したサブセット版のフォントファイルを用意し、それをブラウザに読み込んでもらうことにした。
では、早速サブセット版のフォントファイルを作成することにする。
作成には武蔵システムさんが作成・配布している『サブセットフォントメーカー』というフリーソフトを使用。
使い方は至って簡単で、元となるフォントファイルを指定し、サブセット版のフォントファイル名を指定。そしてサブセット版に入れる文字を指定したら「作成開始」ボタンを押すだけ。
あっと言う間にサブセット版のフォントファイルが完成した。
出来上がったファイルの容量は約5.3KB。元の容量に対して787分の1（約0.25％）にまで小さくなった。
折角新しいことにチャレンジするのだからもう一歩踏み込んでWebフォントを使って見ることにする。
WebフォントにはWeb Open Font Format(WOFF)というWebフォント専用のフォーマットが有り、多くのブラウザが既に対応している。
もちろんTrueTypeやOpenTypeのフォントもそのままWebフォントとして使用できるが、WOFFはWebフォント専用に開発されたフォーマットなのでより圧縮率が高くファイルが小さくなるといったメリットがある。
更にTrueTypeやOpenTypeといったフォーマットはAppleやAdobe、Microsoftが開発したフォーマットですが、WOFFはオープンソースとして開発されたフォーマットなのでブラウザを開発する人達にとっては何かと都合が良いとか、商品として売っているTrueTypeフォントが簡単にWebでダウンロードできてしまうのはけしからん！と申す方々がいるなど大人の事情も見え隠れします。 (^_^;
では、先程作成したサブセット版のTrueTypeフォントからWOFF形式のフォントファイルを作成しよう。
こちらも作成には武蔵システムさんが作成・配布している『WOFFコンバータ』というフリーソフトを使用。
元となるフォントファイルを指定し「変換開始」ボタンを押すだけでWOFF形式のフォントファイルが完成です。
WOFF形式のフォントファイルは約3.9KBと、サブセット版のTrueTypeフォントより更に30％ほど小さくなった。
いい感じですねぇ。
それでは実際にスタイルシートでWebフォントを使ってみましょう。
まず使用するフォントを指定します。
@font-face {「SiteTitleFont」という名前でスタイルシート内で使用し、WOFF形式とTrueType形式の2つのフォントファイルをソースファイルとして指定します。
font-family: 'SiteTitleFont';
src: url('/common/aoyagireisyosimo_subset.woff') format('woff'),
url('/common/aoyagireisyosimo_subset.ttf') format('truetype');
}
この指定方法だと、WOFF形式に対応しているブラウザはWOFF形式を使用し、WOFF形式が何だか理解できないブラウザはTrueType形式を使用してくれます。
続いて、このフォントで文字を表示したい箇所のスタイルとして
font-family: 'SiteTitleFont';とフォントファミリーの指定をします。
以上でスタイルシートの修正は完了。
ブラウザで表示してみると、無事指定したフォントで文字が表示されるはずです。
