Webフォントは，
Webフォントとは
最近，
この
図1 グリフが存在しないために豆腐が表示されてしまった例
ローカルのソフトウェアであれば，
そこで，
@font-face {
font-family: "My font"
src: url("http://example.com/fonts/myfont.woff");
}
h1 {
font-family: "My Font", serif;
}
これにより，
モダンなWebブラウザーが一通り@font-faceルールに対応したのに合わせて，
- 注1）
- Ubuntuや大抵のLinuxディストリビューションでは，
Fontconfigによって複数のフォントファイルの中から設定に従って適切なグリフを持ってくるようになっていますので， 必ずしも1つのフォントファイルの中に必要なグリフがすべて存在する必要はありません。 - 注2）
- @font-faceそのものは，
CSS2の時点で導入されたのですが， CSS2. 1の時点で一旦削除されています。
Web Open Font Format（WOFF）
Webフォントはフォントファイルをダウンロードします。しかしながら従来のフォントファイルのサイズは大きく，
そんなフォーマットの1つが，
既存のフォントをWOFFに変換する
実は@font-faceルールは，
そうすると既存のフォントから必要なグリフのみを抽出したファイルを用意して，
なお，
Ubuntuのリポジトリには
woff-toolsを使う
OpenTypeやTrueTypeから一括して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には，
$ 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ブラウザーに読み込ませれば，
図2 システムにインストールされていない書体名を指定しても，
- 注3）
- ローカルではうまく動作するが，
インターネット経由だとフォントがロードされない場合は， WebフォントのMIMEタイプがどうなっているかや， CORSの制約にひっかかっていないかなどを確認してみてください。ローカルでも動作しない場合は， Webブラウザーの設定や拡張機能を見直してください。
メタデータを埋め込む
Webフォントには，
<?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.
$ sfnt2woff -m metadata.xml kouzan-mouhitsu.ttf