4/4 Webフォントの使い方:Google Fontsで日本語フォントも [ホームページ作成] All About

自サイト上のフォントファイルをWebフォントとして使うCSSの書き方

前ページでご紹介したような各種Webフォント提供サービスを利用しなくても、フォントファイルを自分でウェブ上にアップロードし、そのフォントを読み込んで文字や記号を表示するようにCSSを書くこともできます。例えば以下のような場合に活用できるでしょう。

自分で作成したフォントをウェブサイト上での表示に使いたい場合。
既存のフォントデータから、実際に使う文字や記号を抜き出したサブセットを作り、それを自サイト上で表示に使いたい場合。
ライセンスフリーのWebフォントを自サイト上で表示に使いたい場合。

特に、自サイト専用のアイコンWebフォントを用意した場合には、この方法を使って読み込ませることになります。

ウェブ上のフォントファイルとフォント名を対応付けるCSS

ウェブ上のフォントファイルを読み込んでWebフォントとして使えるようにするには、下記のように「@font-face」という記述をCSSソースに追加します。本記事の2ページ目でご紹介したGoogle Fontsで提供されているCSSの中身も、下記のような記述で構成されています。

@font-face {
   font-family: フォント名;
   src: url('フォントファイル名') format("種類名");
}

フォント名には任意の名称を付けられますが、他のフォントと重複しないようにユニークな名称を付けておきましょう。

■Webフォントを利用できるようにするための記述例：
例えば、「wf」ディレクトリに置いたOpenType形式のフォントファイル「freefont.otf」を「MyWebFont」という名称でWebフォントとして使えるようにしたい場合は、以下のようにCSSを記述します。

@font-face {
   font-family: MyWebFont;
   src: url('./wf/freefont.otf') format("opentype");
}

上記のようにフォント名を定義しておけば、あとは下記のようにfont-familyプロパティを使ってフォント名を指定するだけで表示に使えます。

h1 {
   font-family: MyWebFont;
}

上記では、h1要素の表示に「MyWebFont」フォントを指定しています。これで、h1要素内の文字の表示には、先ほどアップロードしたフォント「freefont.otf」が使われます。

ローカル環境に同名フォントがあるならダウンロードしないようにする書き方

上記の記述方法だと、フォントファイルが常にダウンロードされてしまいます。もし、ローカル環境に既にそのフォントがインストールされている場合は、無駄なダウンロードになってしまいます。それを避けるには、下記のようにlocalという記述を使っておきます。

@font-face {
   font-family: MyWebFont;
   src: local("MyWebFont"), url('./wf/freefont.otf') format("opentype");
}

上記の場合は、ローカル環境に「MyWebFont」という名称のフォントがあればそれが表示に使われます。ローカル環境に「MyWebFont」という名称のフォントがない場合には、ウェブ上からfreefont.otfファイルが読み込まれます。

フォントファイルのサイズに注意

日本語のように文字数の多い言語では、フォントファイルのサイズも大きくなってしまいます。欧文フォントや、日本語フォントでも「ひらがな・カタカナ」だけを収録したフォントなど、サイズの小さいフォントファイルでない限りダウンロードには長い時間がかかってしまう点に注意して下さい。

日本語フォントの場合は、先述の日本語Webフォント提供サービスのように、収録文字数を絞ったフォントを配信することでダウンロードサイズを抑える手段を活用するのが現実的でしょう。

※Google Fontsの場合は「unicode-range」という指定方法を使って、文字コードの範囲ごとにフォントファイルを細かく分割することでサイズを抑える仕様になっています。TypeSquareの場合は、JavaScriptを併用して「実際にウェブページ上に存在する文字」に限ったサブセットを作って配信することでサイズを抑える仕様になっています。

フォントのライセンスに注意

WindowsやmacOSなどのOSに付属しているフォントファイルや、各種パッケージソフトに付属しているフォントファイルを勝手にアップロードして使うことはできません。

ロイヤリティフリーで利用できる日本語フォントはたくさん公開されていますが、Webフォントとして使う場合は有償になるような条件が付加されている場合もありますから注意して下さい。フリーフォントと謳われていれば何でもWebフォントとしてアップロードして良いわけではありません。使う前にライセンスの記述をよく確認して下さい。

Webフォントとしても使える日本語フォント「Rounded M+」

WebフォントはCSS3で登場した機能ですから、フリーフォントの作者がWebフォントとしての利用形態を想定していないこともあります。Webフォントとして利用して良いと明示されていない場合は、作者や配布元に問い合わせてみて下さい。

望みのフォントで文字を表示できる、CSSのWebフォント機能

今回は、ブラウザがウェブ上からフォントファイル自体をダウンロードして表示に使ってくれるWebフォント機能の使い方として、Google Fontsの使い方(p.2)、TypeSquareの使い方(p.3)、CSSの記述方法(p.4)の3点をご紹介いたしました。Webフォントを提供してくれる各種サービスを利用して、ぜひ望みのフォントを活用してみて下さい。

【関連記事】