Ubuntu Weekly Recipe

第332回 Webフォントをつくろう

この記事を読むのに必要な時間:およそ 5 分

Webフォントは,サーバー上にあるフォントファイルをWebブラウザーがダウンロードして表示するCSS3の@font-faceルールで使われるフォントです。今回は,Ubuntu上でこのWebフォントのうち,W3C勧告になっているWeb Open Font Format(WOFF)をUbuntu上で作成する方法を紹介します。

Webフォントとは

最近,250文字の絵文字が追加されたUnicode 7.0がアナウンスされました。対応しているフォントが手元にあれば,ドクロマークやサングラスといった使い道が難しい絵文字も,文字として表示できるようになります。

この「対応しているフォント」というのが曲者です。コンピューターにおけるフォントファイルは,特定の書体に従って作成されたグリフデータとその他のメタデータの集合体です。あるフォントファイルが特定の文字を表示するためには,フォントファイルの中にその文字のグリフデータを持っている必要があります注1)。言い換えると,グリフデータがない状態では,その文字は表示できず,たとえば「豆腐化」のように文字化けしてしまうのです。

図1 グリフが存在しないために豆腐が表示されてしまった例

図1 グリフが存在しないために豆腐が表示されてしまった例

ローカルのソフトウェアであれば,そのソフトウェアをインストールするときに必要になるフォントデータもセットでインストールすることで対応できます。しかしWebページで表示するフォントは,アクセスするユーザーの環境にどんなフォントがインストールされているのかわかりませんし,アクセスする度にフォントをシステムにインストールすることもできません。

そこで,「@font-face」というルールがCSS3で用意されました注2)。@font-faceに書体名とフォントファイルのURLを指定することで,Webブラウザーはページへのアクセス時にフォントファイル(Webフォント)をダウンロードし,システムにインストールされていないフォントであってもfont-familyに指定できるようにするものです。

@font-face {
    font-family: "My font"
    src: url("http://example.com/fonts/myfont.woff");
}

h1 {
    font-family: "My Font", serif;
}

これにより,Webページの作成者は,閲覧者の環境にどんなフォントがインストールされているか気にすることなく,デザインを考えられるようになったのです。

モダンなWebブラウザーが一通り@font-faceルールに対応したのに合わせて,Google FontsTypeSquareと言ったWebフォントを無償・有償で提供するサービスも始まっています。

注1)
Ubuntuや大抵のLinuxディストリビューションでは,Fontconfigによって複数のフォントファイルの中から設定に従って適切なグリフを持ってくるようになっていますので,必ずしも1つのフォントファイルの中に必要なグリフがすべて存在する必要はありません。
注2)
@font-faceそのものは,CSS2の時点で導入されたのですが,CSS2.1の時点で一旦削除されています。

Web Open Font Format(WOFF)

Webフォントはフォントファイルをダウンロードします。しかしながら従来のフォントファイルのサイズは大きく,グリフの少ない英語フォントでも数十Kバイト,日本語フォントだと数Mバイトものサイズになってしまいます。これをアクセスのたびにダウンロードするのは非効率ですし,ページの描画にも時間がかかってしまいます。そこで通常のフォントを圧縮して利用できるフォントファイルフォーマットがいくつか作成されました。

そんなフォーマットの1つが,W3C勧告になったWeb Open Font FormatWOFFです。WOFFは,OpenType/TrueTypeをベースに圧縮されたファイルで,XMLのメタデータを追加することも可能です。仕様が公開されているため,モダンなWebブラウザーなら一通り対応していますし,Ubuntuでも比較的簡単にWOFFファイルを作成できます。

既存のフォントをWOFFに変換する

実は@font-faceルールは,Webブラウザーにも依存するものの,OpenTypeやTrueTypeと言った既存のフォントファイルに対しても使用できます。ただし前述のとおりファイルサイズが大きく,ロード時間が長くなってしまいます。さらにWebページで使用するグリフはそこまで多くはありません。メニューにのみ特殊な書体を使いたいのであれば,多くてもせいぜい数十文字でしょう。

そうすると既存のフォントから必要なグリフのみを抽出したファイルを用意して,それをWOFFに変換すれば,ページのロード時間がより短くなります。ここでは,Ubuntuで必要なグリフのみを揃えたWOFFを作る方法を紹介します。

なお,同じことを他のフォントにも行う場合は,フォントのライセンスに注意してください。とくに「フリーフォント」と呼ばれるものの中には再配布自体は許可していても,グリフの抽出や別フォーマットへの変換といった「改変」になりうる行為は許可していない場合も多いようです。

Ubuntuのリポジトリには「fonts-foo」「ttf-foo」といった名前のフォントパッケージが多数存在します。そのほとんどはDebian Fonts Task Forceによってメンテナンスされているフォントで,比較的自由に使用可能です。ただしフォントは一般的なFLOSSと異なり,独自ライセンスであることも多く,一筋縄ではいかないことも事実です。パッケージからインストールできるフォントの詳しいライセンス情報は,「/usr/share/doc/パッケージ名/copyright」を参照してください。

woff-toolsを使う

OpenTypeやTrueTypeから一括してWOFFに変換するなら,woff-toolsを使うのが一番簡単です。ためしに改変も含めて自由に利用できる衡山毛筆フォントをWOFFにしてみましょう。衡山毛筆フォントはパッケージ化されているので,リポジトリからインストールできます。

$ sudo apt install fonts-kouzan-mouhitsu
$ dpkg -L fonts-kouzan-mouhitsu
/.
/usr
/usr/share
/usr/share/fonts
/usr/share/fonts/truetype
/usr/share/fonts/truetype/kouzan-mouhitsu
/usr/share/fonts/truetype/kouzan-mouhitsu/kouzan-mouhitsu-gyosho.ttf
/usr/share/fonts/truetype/kouzan-mouhitsu/kouzan-mouhitsu.ttf
/usr/share/fonts/truetype/kouzan-mouhitsu/kouzan-mouhitsu-sosho.ttf
/usr/share/doc
/usr/share/doc/fonts-kouzan-mouhitsu
/usr/share/doc/fonts-kouzan-mouhitsu/changelog.Debian.gz
/usr/share/doc/fonts-kouzan-mouhitsu/copyright

woff-toolsもリポジトリからインストールします。

$ sudo apt install woff-tools

woff-toolsには,sfnt2woffコマンドとwoff2sfntコマンドの2つがあります。sfnt2woffコマンドはOpenType,TrueTypeフォントをWOFFに変換し,woff2sfntコマンドはその逆を行うコマンドです。

$ cp /usr/share/fonts/truetype/kouzan-mouhitsu/kouzan-mouhitsu.ttf .
$ sfnt2woff kouzan-mouhitsu.ttf
$ file kouzan-mouhitsu.woff
kouzan-mouhitsu.woff: Web Open Font Format, flavor 65536, length 5585588, version 0.0

作成したフォントを使うHTMLファイルを作成してみましょう。

<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title>Webフォント</title>
<style>
  @font-face {
    font-family: "衡山毛筆Webフォント";
    src: url("kouzan-mouhitsu.woff");
  }
  p {
    font-size: 200%;
    font-family: "衡山毛筆Webフォント", serif;
  }
</style>
</head>
<body>
<p>衡山毛筆フォントのテスト</p>
</body>
</html>

このHTMLファイルをWebブラウザーに読み込ませれば,フォントが衡山毛筆フォントになっているはずです注3)。

図2 システムにインストールされていない書体名を指定しても,期待通りのフォントで表示されていることがわかる

図2 システムにインストールされていない書体名を指定しても,期待通りのフォントで表示されていることがわかる

注3)
ローカルではうまく動作するが,インターネット経由だとフォントがロードされない場合は,WebフォントのMIMEタイプがどうなっているかや,CORSの制約ひっかかっていないかなどを確認してみてください。ローカルでも動作しない場合は,Webブラウザーの設定や拡張機能を見直してください。

メタデータを埋め込む

Webフォントには,Extended Metadata Blockというライセンスや作成者,フォントの説明を埋め込むメタデータ領域が存在します。sfnt2woffで変換する時にXMLファイルを渡しておくと,このメタデータを埋め込むことができます。

<?xml version="1.0" encoding="UTF-8"?>
<metadata version="1.0">
  <uniqueid id="com.example.KouzanMouhitsu"/>
  <vendor name="青柳 衡山 (Kouzan Aoyagi)" url="http://opentype.jp/kouzanmouhitufont.htm"/>
  <credits>
    <credit name="青柳 衡山 (Kouzan Aoyagi)" role="design"/>
  </credits>
  <description>
    <text lang="ja">衡山毛筆フォント for the Web</text>
  </description>
  <license url="http://opentype.jp/kouzanmouhitufont.htm">
    <text lang="ja">
      無料でご利用できます。
      著作権放棄で完全フリーです。
      改編も自由です。
      雑誌・書籍への掲載・CD収録も自由です。
      使用についての制限はありません。
      無保証です。お客様の責任でご利用ください。
    </text>
  </license>
</metadata>

上記のような情報をmetadata.xmlファイルに保存し,次のコマンドでWOFF作成時に埋め込みます。

$ sfnt2woff -m metadata.xml kouzan-mouhitsu.ttf

著者プロフィール

柴田充也(しばたみつや)

Ubuntu Japanese Team Member。数年前にLaunchpad上でStellariumの翻訳をしたことがきっかけで,Ubuntuの翻訳にも関わるようになりました。

コメント

コメントの記入