最新コラム
-
-
-
-
Webサイト制作Web開発
【shopify】テーマをカスタマイズするためのLiquidの書き方
-
Webサイト制作Webデザイン
Webデザインの初心者必見!Webデザインの勉強方法を徹底解説
Webフォントサービスはデザイン性に優れているフォントが簡単に使える反面、種類が少なくて物足りない…と思っていませんか?そこで本記事では、和文でも種類が豊富な商用可能フリーフォントをサーバーにアップロードして、Webフォント化する方法についてまとめてみました。
目次
確かに、無料のGoogle Fontsや有料のTypeSquareといったWebフォントサービスなら、誰でも簡単にWebフォントが扱えます。
にもかかわらず、なぜ多くのWebデザイナーがわざわざサーバーにWebフォントをアップロードする方法を選択しているのでしょうか。
その理由は、サーバーにアップロードしたWebフォントには下記のようなメリットがあるからです。
初心者のブログとWebデザイナーが作成したプロ仕様のサイトでは、どうしても見た目の印象に差が生じてしまいます。
しかし、商用可能なフリーフォントをWebフォント化することで、たとえ個人のブログであってもインパクト重視のサイト作りが手軽に目指せるのです。
フリーフォントをWebフォント化する場合、デメリットとして下記の3点が挙げられます。
サーバーから読み込んで表示するWebフォントは、どうしても重くなりがちです。
後述するサブセット化によって軽量化は図れるものの、コンテンツ全文に使用するよりもタイトルや見出しなど限定的に反映させた方が良いでしょう。
ここからは、お気に入りのフリーフォントを自前のサーバー内にアップロードして、Webフォント化する手順について見ていきましょう。
ちなみに、フリーフォントファイルをWebサーバーやストレージにアップロードして使用することを、専門用語では「セルフホスティング」と言います。
まずは、webフォント化が認められているフリーフォントを準備しましょう。
ここで問題となるのが、全てのフリーフォントがWebフォント化(セルフホスティング)できるとは限らないという点です。
確かに、フリーフォントであればライセンスを購入しなくても無料でダウンロードできますが、だからと言って「用途」や「使用方法」を問わずユーザーが自由に使える訳ではありません。
フリーフォントをwebフォント化して自サイトに表示させる場合、少なくとも下記の3点をクリアしている書体を選んだ方が安心です。
▼ライセンスのチェックポイント
ちなみに、下記ライセンスの内1つでも適用されているフリーフォントであれば、Webフォントとしての利用が可能です。
▼Webフォントとして利用可能なライセンス
今回は、和文フォントが豊富に用意されている「もじワク研究」から選んだ「トガリテ」を使ってWeフォント化に挑戦してみます。
画面下部にある「概要」と「ライセンス詳細」を確認し、「ダウンロード」をクリックして圧縮ファイルを解凍しておきましょう。
文字数が限られている欧文フォントと比べ、漢字・ひらがな・カタカナなど種類が多い和文フォントはファイルサイズが大きい分、読み込み速度が遅くなるのが難点。
そこで、できるだけファイルサイズが小さくなるよう、使用頻度が高い文字だけを抜き出す「サブセット化」を行います。
フリーフォントの種類によっては、1/3以下まで軽量化が可能です。
また、Webフォントとして使用するにはサブセット化の完了後、ファイル形式を変換する必要があります。
あらかじめ、下記2種類のフリーソフトをインストールしておきましょう。
▼使用するフリーソフト(Win・Mac両対応)
インストールしたサブセットフォントメーカーを開くと、下記の画面が表示されます。
1~5の手順に沿って、「.otf」のフォントファイルを軽量化しましょう。
3番にコピペするフォントの種類はJIS第1水準漢字だけでも2,965文字と大量ですが、お好みでもOKです。
「サブセット化 格納 文字」で検索し、不要な文字を削除してからコピペしましょう。
事前にWOFFコンバータをインストールしておいた方がサブセット化に成功すると、自動的に下記の画面が表示されます。
1~4の手順に沿ってフリーフォントの拡張子を「.otf」からWebブラウザ対応の「.woff」へ変換する事で、はじめてWebフォントとして利用できるようになるのです。
今回は基本の「.woff」に加え、IE非対応ながらより圧縮率の高い「.woff2」も同時に作成しましたが、必須ではありません。
InternetExplorerで表示させるEOTファイルを選択することも可能です。
作成したwoffファイルをサーバーにアップロードしたら、最後にコーディングを行います。
例題として、「togaliteClass」を適用した要素にWebフォントを反映させるCSSをご紹介しましょう。
<pre> @font-face { /*任意のフォント名(フリーフォントの名称など)*/ font-family: "togalite"; /*フォントファイルへのパス(複数指定は上から順に読み込まれる)*/ src: url("/assets/font/togalite.woff2") format("woff2"), url("/assets/font/togalite.woff") format("woff"); } .togaliteClass{ font-family: "togalite"; } </pre>
「@font-face」でアップロードしたフォントを定義し、適用させたい範囲を「font-family」で設定します。
Webサイトの印象は、フォントのデザインによって大きく左右されます。
その点、Webフォントならタイトルや見出しに反映させるだけでガラリとビジュアルの印象が変わるうえ、SEOに有利なテキストとして使えるのも大きな強みです。
種類が限られているWebフォントサービスに物足りなさを感じているなら、フリーフォントをサーバーにアップロードするWebフォント化に挑戦してみてはいかがでしょうか。