HTML&CSS

  1. HOME
  2. HTML&CSS
  3. 日本語Webフォントを軽量化してWebサイトに設置する方法

日本語Webフォントを軽量化してWebサイトに設置する方法

HTML&CSS

日本語Webフォントを軽量化してWebサイトに設置する方法

欧文フォントは文字数が少ないためファイルサイズが 200KB くらいですが、和文フォントだと文字数が多いためファイルサイズが 20MBくらいまで大きくなってしまいます。
このままのサイズでWebサイトに設置してしまうと読み込み速度が遅くなり、とても重たいサイトになってしまいます。
今回はこのフォントを軽量化して読み込み速度を上げる方法を実装していきます。

実装の流れ

  1. フォントのダウンロード
  2. サブセットフォントメーカーでフォントを軽量化する
  3. WOFFコンバータで拡張子をWOFFに変換する
  4. Webサイトに設置

実装の流れは上記のようになります。
それでは実装していきましょう。

フォントのダウンロード

今回は日本語フォントで人気のある「 Noto Sans CJK JP 」を使用して軽量化の実装をしていきます。

Google Noto Fonts

http://www.google.com/get/noto/
上記のURLにアクセスし、「 Noto Sans CJK JP 」をダウンロードしてください。
ダウンロードしたファイルを確認すると様々なウェイトのフォントがダウンロードされたと思います。
各ファイルの容量を確認してみると、 16〜17MB とかなり容量が大きいファイルですのでこれを軽量化していきます。

サブセットフォントメーカーでフォントを軽量化する

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

https://opentype.jp/subsetfontmk.htm
上記URLにアクセスし、サブセットフォントメーカーをダウンロードしてください。
サブセットフォントメーカーとは、フォントから指定された文字列だけを取り出して、ファイルサイズを小さくしたフォントを作成するソフトです。
以下の手順で入力していきます。

  1. 「作成元フォントファイル」 軽量化するフォントを指定してください
  2. 「作成後フォントファイル」 作成後のファイル名と保存先を指定します
  3. 「フォントに格納する文字」 フォントに格納する文字（第一水準漢字 記号 ローマ字 カタカナ ひらがな）をコピペしてください
  4. 「作成開始」 ボタンをクリックしてください

この時点で 16〜17MB あったファイルが 700〜800KB くらいまで軽量化されたと思います。
さらにこのファイルを次に紹介する WOFFコンバータ で変換します。

WOFFコンバータで拡張子をWOFFに変換する

WOFFコンバータ

https://opentype.jp/woffconv.htm
上記URLにアクセスし、WOFFコンバータをダウンロードしてください。
WOFFコンバータとは、フォントとWOFF、WOFF2の相互変換を行うソフトです。
以下の手順で入力していきます。

  1. 「変換前ファイル」 軽量化したフォントを指定してください
  2. 「変換後ファイル」 変換後のファイル名と保存先を指定します
  3. 「EOTファイルを作成する」 チェックを入れてください（※IE4～IE9以下対応の拡張子）
  4. 「変換開始」 ボタンをクリックしてください

さらにファイルサイズが 700〜800KB から 500〜600KBくらいまで軽量化することが出来ました。
WOFFを使う利点としてフォントデータが圧縮されているため、無圧縮の TrueType（ttf） や OpenType（otf） ファイルの使用と比べて帯域を抑えることができ、読み込み時間も短縮されます。

フォントの種類によって「 ポストスクリプト形式のOpenTypeフォントのため、EOTファイルは作成されません。 」とメッセージが出る場合があります。その場合は以下リンクのサイトで一度 otf→ttf に変換し、再度WOFFコンバータで ttf→eot に変換してください。
→フォントファイルのフォーマットを変換する： ttf otf fon pfb dfont afm

Webサイトに設置

変換したファイルをCSSに、 @font-face記述 をしていきます。

@font-face {
    font-family: 'NotoSansCJKjp';
    font-style: normal;
    font-weight: 100;
    src: url('../font/NotoSansCJKjp-Thin.woff') format('woff'),
    	 url('../font/NotoSansCJKjp-Thin.eot')  format('eot');
}
@font-face {
    font-family: 'NotoSansCJKjp';
    font-style: normal;
    font-weight: 200;
    src: url('../font/NotoSansCJKjp-Light.woff') format('woff'),
    	 url('../font/NotoSansCJKjp-Light.eot')  format('eot');
}
@font-face {
    font-family: 'NotoSansCJKjp';
    font-style: normal;
    font-weight: 300;
    src: url('../font/NotoSansCJKjp-DemiLight.woff') format('woff'),
    	 url('../font/NotoSansCJKjp-DemiLight.eot')  format('eot');
}
@font-face {
    font-family: 'NotoSansCJKjp';
    font-style: normal;
    font-weight: 400;
    src: url('../font/NotoSansCJKjp-Regular.woff') format('woff'),
    	 url('../font/NotoSansCJKjp-Regular.eot')  format('eot');
}
@font-face {
    font-family: 'NotoSansCJKjp';
    font-style: normal;
    font-weight: 500;
    src: url('../font/NotoSansCJKjp-Medium.woff') format('woff'),
    	 url('../font/NotoSansCJKjp-Medium.eot')  format('eot');
}
@font-face {
    font-family: 'NotoSansCJKjp';
    font-style: normal;
    font-weight: 700;
    src: url('../font/NotoSansCJKjp-Bold.woff') format('woff'),
    	 url('../font/NotoSansCJKjp-Bold.eot')  format('eot');
}
@font-face {
    font-family: 'NotoSansCJKjp';
    font-style: normal;
    font-weight: 900;
    src: url('../font/NotoSansCJKjp-Black.woff') format('woff'),
    	 url('../font/NotoSansCJKjp-Black.eot')  format('eot');
}

body {
    font-family: "NotoSansCJKjp", sans-serif;
}

最後に適用したいタグやクラスにフォントを指定したら設置完了です。

参考サイト

各拡張子の違いなど詳しく知りたいかたは以下参考サイトを参照してください。

あなたにおすすめの記事