h-ash design works｜アッシュデザインワークス
Home > News > Blog > Webフォント ～Google Fonts編～

Webフォント ～Google Fonts編～

Webフォント ～Google Fonts編～

以前に比べWebフォントも使いやすくなってきました。
一昔前は、CSSに「font-family(フォントファミリー)」を記述して、使用OSにインストールされているフォントを指定してきました。優先度順にOSがWindowsなら「Meiryo(メイリオ)」、Macなら「Hiragino Sans(ヒラギノ角ゴシック)」というように記述していました。ですが、ユーザーのOS環境やバージョンによってフォントが切り替わるため(デバイスフォント)「フォントを統一することができない」というデメリットがありました。
近年では、環境に依存しないWebフォントを利用することでフォント表示を統一することができるため、Webサイト全体のクオリティを上げる意味合いでもWebフォントの利用が主流となってきました。Webフォントには、Google FontsやAdobe Fonts、ホスティングサービスを契約すると利用可能なWebフォント(例えば、一部のモリサワ系フォント)など、その種類は様々です。
今回は「Google Fontsをセルフホスティングして(自らフォントをWebサーバーへアップロードして)利用する方法」を紹介していきます。

Index

― 目次 ―
  1. 「Google Fonts」をダウンロード
  2. フォントのサブセット化とWebフォント形式への変換
  3. Webフォントの読み込みとCSSの記述

「Google Fonts」をダウンロード

まずは「Google Fonts」のサイトにアクセスして、フォントをダウンロードします。
今回は「Noto Sans Japanese」を利用します(※リンクをクリックすると「Noto Sans Japanese」のページが開きます)。

  1. 右上に表示されている「Get font」ボタンをクリック
  2. 「Download all」ボタンをクリック
    ※「Get embed code」ボタンをクリックすると「リンク版のソースが表示」されますが、今回はWebフォントをセルフホスティングしますので、こちらは利用しません

    ▼画面イメージ
    Google Fonts編
  3. PCの「ダウンロード」内を確認
    ダウンロードされた「Noto_Sans_JP.zip」を解凍
    今回は「static」フォルダ内の「NotoSansJP-Regular.ttf」を使用します
― §フォントのライセンスについて ―
Webフォントとして利用する前に必ず「ライセンスの確認」を行いましょう。
「Noto Sans Japanese」は「SIL Open Font License(SILオープンフォントライセンス)」の元で管理されていますので、サーバーへのアップロード、ファイル形式の変更が可能なフォントになります(※次項目で説明する「Webフォント形式への変換」で必要になります)。
「SIL Open Font License」については、こちらでご確認ください(※英文ですのでGoogle翻訳などをご利用ください)。
フォントのライセンスについては、随時見直される場合があります。利用される場合には、必ずライセンス内容をご確認の上、自己責任でご利用ください。

フォントのサブセット化とWebフォント形式への変換

  1. フォントのサブセット化
    フォントのサブセット化は「日本語のフォントを使用する際に特に重要な手順」となります。
    フォントのサブセット化を行うことで、フォント内に含まれている文字から必要最低限の文字を抜き出し、ファイルサイズを軽くすることができます。日本語のフォントは漢字を含んでいますので、どうしてもファイルサイズが重くなりレスポンスに影響してきます。そのため、フォントのサブセット化を行うことで、ユーザビリティも向上するというわけです。
    フォントのサブセット化には、武蔵システムさんが提供されている「サブセットフォントメーカー」を利用します(※テキストリンクより「サブセットフォントメーカー」をダウンロードし、お手持ちのPCにインストールしてください)。

    [サブセットフォントメーカーの使用手順]
    ①作成元のフォントファイルを指定
    [参照]ボタンよりフォントファイルを指定します。
    ②作成後のフォントファイルの保存先+ファイル名を指定
    [参照]ボタンよりフォントファイルの保存先を指定し、ファイル名を入力します。
    ※入力したファイル名でサブセット化されたフォントファイルが作成されます
    ③フォントに格納する文字を入力
    第一水準漢字、記号、ローマ字、カタカナ、ひらがなを格納します。
    以下よりコピーして「フォントに格納する文字(C):」箇所に貼り付けてください。 ④書体名を変更する場合は入力
    同じ書体名のフォントがPCにインストールされている場合、印刷時に文字バケすることがありますので、その対応策です。
    ⑤[作成開始]ボタンをクリック
    これで「フォントのサブセット化」は完了です。
    5,599kbのフォントデータが965kbまで軽くなりました。

    ▼サブセットフォントメーカーの画面
    サブセットフォントメーカーの画面
  2. Webフォント形式への変換
    フォントのサブセット化をしたデータの拡張子をWebフォント形式に変換します。
    PCにインストールして使用できるフォント形式は「ttf」「otf」などですが、Webフォントで使用するフォント形式は「woff(Web Open Font Format)」「woff2」「eot(Embedded Open Type)」の3つがあります。
    ▼woff(Web Open Font Format
    Webページの表示に用いることを想定し開発されたWebフォントのファイル形式です。2009年に米モジラ財団(Mozilla Foundation)が開発し、2011年8月にW3Cが標準化した形式で、標準のファイル拡張子は、WOFF 1.0が「.woff」となっています(※Internet Explorerは、バージョン9以降から対応しています)。
    ▼woff2
    woffのアップデート版のファイル形式です(WOFF 2.0)。woffと比較しても圧縮率が高く、Internet Explorerを除く、最新ブラウザのほとんどでサポートされています。
    今回は、圧縮率の高さ、最新のブラウザのほとんどでサポートされていることから「woff2」形式に変換します(※Internet Explorerは、既に米マイクロソフトのサポートも終了していますので、対象外とします)。
    ▼eot(Embedded Open Type)
    米マイクロソフトが開発したWebフォントのファイル形式です。Internet Explorer8以前はwoffに対応していませんので、eotファイルが必要となります。

    Webフォント形式への変換には、武蔵システムさんが提供されている「WOFFコンバーター」を利用します(※テキストリンクより「WOFFコンバーター」をダウンロードし、お手持ちのPCにインストールしてください)。

    [WOFFコンバーターの使用手順]
    ①変換前ファイルを指定
    [参照]ボタンより変換前ファイルを指定します。
    ②変換後ファイルの保存先+ファイル名を指定
    [参照]ボタンより変換後ファイルの保存先を指定し、ファイル名を入力します。
    ③変換(作成)するファイル形式にチェック
    「WOFF2を作成する」にチェックします。
    ④[変換開始]ボタンをクリック
    これで「Webフォント形式への変換」は完了です。

    ▼WOFFコンバーターの画面
    WOFFコンバーターの画面

Webフォントの読み込みとCSSの記述

  1. Webフォントの読み込み
    headタグ内に以下を記述します。 [補足]
    フォントプリロードを指定します(※「rel=”preload”」の箇所)。
    Webフォントは、フォントが指定されているサイトのロードが始まった際に読み込まれますので、事前に先読みさせることで表示速度を速めることができます。「NotoSans-R」が使用しているフォント、「as=”font” type=”font/woff2″」 属性は、このリソースをフォントとしてダウンロードするようブラウザに指示し、リソースキューの優先順位付けに役立ちます。「crossorigin」 属性は、フォントが別のドメインから取得される可能性があるため、CORSリクエストでリソースを取得する必要があるかどうかを示しています。この属性がないと、プリロードされたフォントがブラウザで無視されますので注意してください。
  2. CSSの記述
    CSSに以下を記述します [補足]
    2行目は「@font-face規則を記述しフォントファイルを読み込む」。
    3行目は「Webフォント名」。
    4行目は「読み込むフォントのファイルパス」と「フォント形式」。
    5行目は「Webフォントが読み込まれるまでは、代替フォントを表示」。
    9行目は「NotoSans-Rが読み込まれるまでは、後述しているデバイスフォントを代替フォントとして指定」。
    となります。

今回は「Webフォント ～Google Fonts編～」についてご紹介しました。
Webフォント導入時の参考になりましたら幸いです。

キーワード関連キーワード