eot ファイルを作る手順

1. Microsoft WEFT のダウンロードページ から、Microsoft WEFT をダウンロードし、インストールします。この例では Version 5.3.2 を使用しています。
2. Microsoft WEFT を起動するとウィンドウが開きます。
3. メニューバーの Tools から Run Wizard を実行します。
4. Enter the URL… に作成した eot のフォントを使う Web サイトの URL を入力します。ローカルでの確認をするために、file:///C: も入力します。
5. 時間がかかるので Skip analysis をチェックして次へ進みます。
6. Add… のボタンをクリックしてローカルにインストールされているフォントリストから、埋め込み用にまとめたいフォントを選択し、OK のボタンを押します。
7. 選択したフォントが追加されたら Subset… ボタンを押します。このとき、Font の項目のアイコンが緑色のチェックになっているアイテムのみから eot ファイルが作れるようで、赤色のバツ、黄色のクエスチョンマークの場合は不可能なようです。オープンソースやパブリックドメインのフォントは大抵、緑色のチェックになり、eot ファイルを作ることができます。
8. 現れたウインドウで埋め込み用フォントに使うフォントを追加していきます。show font の右に直接入力しても追加できます。多すぎると出来上がった eot ファイルは重くなります。選び終わったら OK のボタンを押し、次へのボタンを押します。
9. エラーが出て、次へ進めなくなるので、一度キャンセルのボタンを押します。
10. 最初の画面に戻るので、ツールバーの Embed のボタンを押します。
11. すると、先ほどの画面が出て、完了のボタンが押せるようになっているので、Enter the location… に eot のフォントファイルを保存する先を入力します。この例ではわかりやすいように file:///C: としています。
12. すると、font ファイルが指定した場所にできあがっています。

フォントを埋め込む

CSS で @font-face を定義します。font-famiry にそのフォントの名前をつけます。名前の内容は任意で大丈夫です。src でフォントの場所を指定します。

@font-face {
font-family: aoyagi;
src: url(AOYAGI.eot);
}

すると、先ほど定義したフォントを使うことができます。

p{
font-family:aoyagi;
}

コメント

コメントフォーム

お名前

E mail アドレス (必須ではありません。コメントには表示されません。)

URI

コメント

コメントでは一部の XHTML タグを使用できます。 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>