PDFからfontを取り出しCSSに埋め込む方法

凝ったロゴやヘッダー画像を作らずに、サイト名だけを好きなフォントで表示する方法の覚書。
簡単に言うと、フリーフォントをブラウザ表示してPDFに書き出し、PDFからフォントを抽出、64ビットエンコード後にCSS書き出し、という流れ。ヘッダー表示時間の短縮に効果的。（作成日: 2016/09/28 17:04）

1. よさげなフォントを探す

著作権がややこしくないフリーフォントを探す。今回は「Kazesawa フォント」を使う。商用利用可、WEBフォント可、使った連絡しなくておkだとありがたい。

2．フォントフォルダ内にhtmlファイルを作成

DLしたフォントを同じ階層で解凍。「kazesawa」フォルダを開き、フォントビューアーで好みのフォントを選んだ後、「1.html」という名のhtmlファイルを新規作成する。

3．htmlファイルの中身を書く

先程のhtmlファイルには下記のコーディングをしておく。ポイントは、font-family に使いたいttfフォントを1つだけ記述する。また、本文はタグ不要。

<!doctype html><html lang=ja>
<head><meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title></title>
<style>
@font-face{font-family:"a";src:url("使いたいフォント名.ttf")}
*{font-family:"a";}
</style>
</head>
<body>サイト名（抽出したい文字）</body>
</html>

4．キツネで表示確認

先程作成したhtmlファイルを狐で開く。希望するフォントで表示されているかを確認。

5．PDFに出力する

狐のメニュー「ファイル」から「印刷...」を開き、「ファイルに出力する」を選択。出力形式は「PDF」。
ちなみに、場所と名前を指定する場合には、カーソル位置にある「ファイル」というボタンを押し、出現するサブウィンドウで指定する（画像は割愛）。

保存後の状態。

6．出力したPDFをFontforgeで開く

注意）もし、Fontforgeをインストールしていなければ、パッケージマネージャーでインストールしておく。

Fontforgeを起動し、先程出力したPDFを選択。
「Extract from PDF」を選択した後、OKボタンを押す。すると、下記のような別ウィンドウが開く。

7．PDFからフォントを出力

別ウィンドウのメニュー「ファイル」から「フォントを出力...」を選択する。

「Generate Fonts」という名のウィンドウが開いたら、フォント名を適宜指定し、「TrueType」を選択して保存ボタンを押す。

8．抽出したフォントを確認

指定したフォント名と同じ「1.ttf」があるので、これをフォントビューアーで開く。

フォントビューアーには、抽出したフォントのみが表示される。

9．作ったフォントをBase64方式に変換

次に、作ったフォントをCSSで読み込めるよう、Base64方式に変換する。
まず、端末で、下記のコマンドを入力。

base64 --wrap=0 '作ったttfフォント名' > 変換後のテキストファイル名

今回は同じ階層に「2.txt」という名前で保存する為、以下のように記述する。

base64 --wrap=0 '/var/tmp/1.ttf' > /var/tmp/2.txt

10．CSSに記述する

「2.txt」を開くと大変なことになっているようだがこれでおk。
「全てを選択」してコピーし、CSSに以下の通り記述。

@font-face{font-family:"a";src:url(data:application/x-font-woff;charset=utf-8;base64,※2.txtに書かれた内容);}
header{font-family:"a";}

今回は「2.html」の<header>のCSSに指定している。

11．ブラウザで確認

「2.html」を狐で確認。できた。