noseblog

menu

2019.6.20

ダウンロードしたフォントをwebフォント化する方法

こんにちは、のせです。

今回はダウンロードしたフォントをwebフォント化する方法について解説していきます。

手順は以下の通りです。

  • 準備をする
  • サブセット化
  • WOFFデータに変換する
  • CSSでフォントファミリーを定義する

では詳しくみていきましょう。

準備

こちらの2つのアプリをインストールしておきましょう。

サブセットフォントメーカー

フォントデータから必要な文字列だけを抜き出して軽量化する操作(サブセット化)に必要です。

WOFFコンバータ

ttf形式のフォントデータをwebサイト用の形式(woff形式)に変換する操作に必要です。

また、今回使用するフォントデータ”自由の翼フォント”を使います。こちらからダウンロードしておきましょう。

サブセット化

ダウンロードしたフォントをサブセット化します。

まず、サブセットフォントメーカーを開きます。開くとこちらの画面が表示されるはずです。

”作成元フォントファイル”にダウンロードしたフォントデータ(JiyunoTsubasa.ttf)を参照します。

”作成後フォントファイル”にはサブセット化されたのフォントデータを保存する位置を指定しましょう。ここではDesktopとしました。

”フォントに格納する文字”に使用したい文字列を追加します。ここでは”あいうえお”としています。

これでデスクトップにサブセット化されたJiyunoTsubasa.ttfがあるはずです。次にWOFFコンバータをつかってwoff形式に変換します。

WOFFデータに変換する

次に先ほどサブセット化したフォントデータをwoff形式に変換します。WOFFコンバータを開きましょう。

開いたら下記のように設定します。設定したら、変換開始ボタンをおしてデスクトップにJiyunoTsubasa.woffが作成されていることを確認します。

これでサブセット化、WOFFデータへの変換まで終わりました。最後にJiyunoTsubasa.woffをhtmlやcssファイルと同じディレクトリに移動させましょう。

最後にcssを定義することでwoffをwebサイトに読み込みます。

CSSでフォントファミリーを定義する

まず以下の記述ををhtmlに書きましょう

cssでフォントファミリーを定義します。

webサイト上では以下のように表示されれば成功です。

サブセット化のセクションで指定した通り”あいうえお”のみに自由の翼フォントが定義されていることがわかります。

これらのファイルをフォントデータごとサーバにアップロードすれば、自由の翼フォント端末にインストールしていないユーザーも自由の翼フォントをwebサイト上に表示できます。

今回は以上になります。