無料の日本語ウェブフォントGoogle Noto Sans Japaneseを90%以上軽量化する方法

ブログやサイトを作成していて、Webフォントを使用したいことってありますよね。

でも、Webフォントを利用するとページの読み込み速度が遅くなって、表示するのに時間がかかってしまう。

そうすると離脱が上がってしまい、Googleの評価も下がってしまう。

この記事では、日本語のWebフォント「Google Noto Sans Japanese」の容量を削減して軽量化する方法を紹介します。

なぜ容量を削減できるのかというと、必要のない漢字などを削除するからです。普段の文章を書くのに、常用漢字以外は必要ないということ。

Webフォントのファイルサイズを、90%以上も削減しているので、読み込み時間が速いです!

Webフォントを利用したい。でも、読み込みスピードが遅くなるのはイヤだという方は、ぜひ試してください。

スポンサーリンク

Webフォントを軽量化する手順

  • フォントファイルのダウンロード
  • サブセットフォントメーカーをインストール
  • WOFFコンバータをインストール
  • 第一水準漢字のファイルをダウンロード
  • スポンサーリンク

    必要なファイルをダウンロード&インストールする

    初めに、無料Webフォントの「Google Noto Sans Japanese」をダウンロードしましょう。

    Google Noto Sans Japaneseのダウンロード

    noto-sans-japanese_01

    以下のリンク先にある「Noto Sans CJK JP」というファイルをダウンロードします。

    ダウンロードしたファイルの中に、7種類のフォントファイルがあるので使用したいフォントを決めましょう。

    Googel Noto Fonts

    サブセットフォントメーカーをインストール

    サブセットフォントメーカーとは?

    フォントから指定された文字列だけを取り出して、ファイルサイズを小さくしたフォントを作成するソフトです。 変換元のフォントとしては、TrueTypeフォント(拡張子 .ttf、.ttc)、OpenTypeフォント(拡張子.otf)を指定できます。 変換後のフォントをWOFFコンバータでWOFF(Web Open Font Format)に変換すればさらにファイルサイズを小さくできますので合わせてご利用ください。

    WOFFコンバータをインストール

    WOFFコンバータとは?

    フォントとWOFFの相互変換を行うソフトです。 WOFFはWeb Open Font Formatの略で、Webフォントの1形式です。 変換元のフォントとしては、TrueTypeフォント(拡張子 .ttf)、OpenTypeフォント(拡張子.otf)、Windowsにおけるフォントにリンクする形式の外字ファイル(拡張子.tte、.ote)を指定できます。 WOFFの作成と同時にEOT(Embedded OpenType)ファイルを作成することもできます。ただし、Windos版で作成したEOTファイルは圧縮されていますが、Mac版では圧縮されていません。 WOFFをTrueTypeフォント/OpenTypeフォントに変換することもできます。

    武蔵システム

    第一水準漢字のファイルをダウンロード

    テキストファイルです。右クリックして、ファイルを保存してください。

    スポンサーリンク

    フォントのサブセット化

    google-noto-sans-japanese_02

    サブセットフォントメーカーを起動。

    作成元フォントファイル:先ほどダウンロードしたフォントファイル(.otf)を選択。

    作成後フォントファイル:作成したフォントの保存先を選択。

    フォントに格納する文字:テキストファイルの第一水準漢字を開き、内容を全てコピーして、貼り付けます。

    設定が完了したら作成開始をクリック。

    WOFFコンバータを起動する

    google-noto-sans-japanese_03

    変換前ファイル:サブセットフォントメーカーで作成した、.otfファイルを指定。

    変換後ファイル:変換後のファイル名を指定。

    フォントをWOFFに変換する時:IE8に対応させたい場合、「EOTファイルを作成する」にチェックを入れます。

    設定が完了したら、変換開始をクリック。

    これで、woffファイルが作成されました。

    NotoSansCJKjp-Regular.otfの場合
    変更前変更後削減率
     16.4MB569KB96%

    ファイルサイズを比較すると、16.4MBあったファイルが、569KBまで容量を削減!

    削減率は、なんと96パーセント!

    サーバーにアップロードする

    作成した「.woffファイル」と「.eotファイル」を使用しているテーマの、style.cssと同じ階層にアップロードします。

    以下のパスは「fonts」フォルダを作成した例です。

    /public_html/wp-content/themes/使用テーマ名/fonts/Noto Sans Japanese.woff

    /public_html/wp-content/themes/使用テーマ名/fonts/Noto Sans Japanese.eot

    style.cssにコードを追加する

    fontsフォルダの中にある、「.woffファイル」と「.eotファイル」を読み込む場合。

    css

    @font-face {
    font-family: 'Noto Sans Japanese';
    src: url('./fonts/Noto Sans Japanese.woff'),url('./fonts/Noto Sans Japanese.eot');
    }

    あとは、フォントを使用したい箇所に、font-familyを指定するだけ。

    css

    body {
    font-family: 'Noto Sans Japanese', sans-serif;
    }

    スポンサーリンク