Webフォントを使ってウェブサイトを好きなフォントで彩る｜web design－havin' a coffee break

Webフォントとは何か

＃

“Webフォント”とは？

通常ウェブページを開いたときにブラウザは端末にインストールされているフォントを使用してウェブページを表示します。そのため、ウェブページの制作者が表示したいフォントを指定してもユーザーの端末にそのフォントがインストールされていなければ意図したフォントとは違うフォントが表示されてしまいます。“Webフォント”はフォントのファイルをサーバー上に置いておき、ウェブページを表示するときにこれを使ってもらうことで意図した通りのフォントが表示されるようにするための技術です。

＃

Webフォントのメリットとデメリット

メリット

制作者が意図したフォントが表示されるのでレイアウトが崩れたり、ウェブサイトの見た目の印象がユーザーの環境によって違ったりしない。
アイコンなどをフォント化することで画像を使用する場合に比べて読み込みを速くすることができる。また、画像と違って表示する大きさの違いで劣化しない。

デメリット

特に日本語の場合、ウェブページを読み込むときに大きなフォントファイルを読み込まなければならないため、表示速度が遅くなる。
フォントごとのライセンスに従う必要があり、使用するに当たって制約がある場合が多い。
ユーザーがブラウザの設定などでWebフォントを無効にしている場合は表示できない。

Webフォントの作り方と使い方

＃

2通りのフォントの入手方法

Webフォントを使用するにはまずフォントを入手する必要があります。Webフォントに使用するフォントファイルを入手する方法は以下の2通りです。

フリーフォントなどをWebフォント化して自分のウェブサイトのサーバーにアップロードして使用する方法
自分で用意したフォントファイルをWebフォント化する方法です。好みのフォントをWebフォントとして使用することができますが、ライセンスによりサーバーへのアップロードを許可していないフォントも多いためすべてのフォントを自由にWebフォントとして使用することができるわけではありません。: Webフォントサービスを使用してインターネット上にあるフォントを使用する方法
“Google Fonts”などのサービスを使用してあらかじめ用意されているWebフォントを読み込んで使用する方法です。フォントファイルを自分で用意してサーバーにアップロードする必要がなく手軽に使用することができます。欧文フォントはたくさんの種類がありますが、それに比べると和文フォントはまだあまり多くありません。有料のものと無料のものがあります。

この記事では用意したフォントファイルをWebフォント化して自分のウェブサイトのサーバーにアップロードして使用する方法について紹介します。

＃

フリーフォントをWebフォント化する前に

フリーフォントをWebフォントとして使用するにはそのフォントのライセンスに従う必要があります。サーバーにアップロードすることを許可していないフォントも多いのでそういったフォントは勝手にWebフォント化して使うことはできません。また、ファイル形式の変換や商用利用などについて決められているものもありますので事前によく調べておく必要があります。

＃

Webフォントを作成する

WindowsやmacOSなどで標準的に利用されているフォントの形式(フォーマット)はTrueType(“.ttf”)が標準的で、配布されているフリーフォントもTrueTypeのものが多いです。しかし、Webフォントは現在はWeb Open Font Format(“.woff”)が主流です。True Type FontをWebフォントとしてそのまま使用することもできますが、ファイル形式を変換してWeb Open Font Formatのものを用意するのが一般的です。

他にもフォントファイルの形式はいくつもありますが、Webフォントとして使用することができるフォントの形式には以下のものがあります。

.woff(Web Open Font Format)
.woff2(Web Open Font Format 2)
.ttf(True Type Font)
.otf(Open Type Font)
.eot(Embedded Open Type)
.svg(Scalable Vector Graphics Font)

Webフォントは複数の形式のフォントファイルを使用することができるので、想定するユーザーの環境に合わせたものを用意します。

前述したとおり、現在主流なのは“.woff”で主要なブラウザは対応しています。また、比較的新しいブラウザは“.woff2”にも対応しています。

最低限“.woff”は用意しておくべきです。また、一部のモバイルブラウザを考慮するのであれば“.ttf”もあると良いでしょう。他の形式については古いブラウザなどを考慮しないのであればなくても大丈夫です。

ファイル形式の変換は“WOFFコンバータ”などのフリーソフトで行うことができます。

また、アップロードしたフォントファイルをWebフォント用に一括変換してくれるサービス“Webfont Generator”などもあります。

＃

Webフォントをサブセット化する

“サブセット化”はフォントファイルから必要な文字だけを取り出したフォントファイルを新たに作ることです。特に日本語はひらがな、カタカナ、漢字と文字数が非常に多く、欧文に比べるとフォントファイルが大きくなりがちです。そのWebフォントを使用する場所によって必要な文字が決まっているのであればサブセット化することでウェブページの読み込み時間を短縮することができます。

Webフォントサービスを使用する場合やフォントファイルに含まれるすべての文字を使用したい場合はサブセット化の作業は必要はありません。

サブセット化は“サブセットフォントメーカー”などのフリーソフトで行うことができます。

＃

Webフォントをアップロードする

Webフォントは原則クロスオリジン(クロスドメイン)での使用が制限されています。なのでフォントを使用したいウェブサイトとは同じドメインのサーバーにWebフォントファイルをアップロードする必要があります。異なるドメインのサーバーにアップロードするとフォントが表示されない可能性があります。

どうしてもクロスオリジンでWebフォントを使用したい場合はCORS(Cross-Origin Resource Sharing)の設定で制限を緩和する必要があります。

Webフォントの使い方

＃

CSSで“font-family”を定義する

スタイルシートでWebフォントを指定できるようにするために、CSSの“@font-face”ルールを使用してフォントを定義します。



@font-face {



 font-family: '〚フォントの名前〛';

 src: url('〚.eotファイルのURL〛');

 src: url('〚.eotファイルのURL〛?iefix') format('eot'),



      url('〚.woffファイルのURL〛')  format('woff'),

      url('〚.woff2ファイルのURL〛')  format('woff2'),

      url('〚.ttfファイルのURL〛')  format('truetype'),

      url('〚.svgファイルのURL〛#svgFontName')  format('svg');



}

複数の形式のフォントファイルを“,(カンマ)”で区切って記述することでブラウザが対応している形式のフォントファイルを選んで使用します。

“〚フォントの名前〛”はスタイルシートの中で使用するためのフォントの名前を指定します。

以下はファイル名などを記述した例です。



@font-face {



 font-family: 'my-font';

 src: url('font/web-font-regular.eot');

 src: url('font/web-font-regular.eot?iefix') format('eot'),



      url('font/web-font-regular.woff')  format('woff'),

      url('font/web-font-regular.woff2')  format('woff2'),

      url('font/web-font-regular.ttf')  format('truetype'),

      url('font/web-font-regular.svg#svgFontName')  format('svg');



}

すべての形式のフォントファイルを用意する必要はなく、不要な形式のフォントファイルは省略できます。古いブラウザを考慮する必要がない場合は以下のように記述できます。



@font-face {



 font-family: '〚フォントの名前〛';

 src: url('〚.woffファイルのURL〛')  format('woff'),



      url('〚.woff2ファイルのURL〛')  format('woff2'),

      url('〚.ttfファイルのURL〛')  format('truetype');



}

“.woff2”、“.woff”、“.ttf”の順番で対応している形式のフォントファイルをブラウザが使用します。

＃

CSSでWebフォントを使用したい箇所を指定する

“@font-face”ルールで定義したWebフォントを使用するには“font-family”ディスクリプタで指定したフォント名を通常のWebフォントでないフォントを指定する場合と同様に“font”プロパティや“font-family”プロパティの値として指定します。



p {



 font-family: '〚フォントの名前〛';


}

例えば“p”要素内のすべての文字にWebフォントを使用したい場合は以下のようにスタイルシートを記述します。



@font-face {



 font-family: 'my-font';

 src: url('font/web-font-regular.woff')  format('woff'),



      url('font/web-font-regular.woff2')  format('woff2'),

      url('font/web-font-regular.ttf')  format('truetype');




}





p {



 font-family: 'my-font';


}

Webフォントを定義した“@font-face {~}”とそのWebフォントを使用する箇所は同じスタイルシートに記述する必要はなく、別々のスタイルシートに記述してもどちらも読み込めばそのWebフォントを使用することができます。

＃

複数のウェイト、スタイルを持つWebフォントの定義方法

同じフォント名(“font-family”)でウェイト、スタイルごとに異なるフォントファイルを指定したい場合は以下のように定義します。



@font-face {



 font-family: 'my-font';

 src: url('font/web-font-regular.woff')  format('woff'),



      url('font/web-font-regular.woff2')  format('woff2'),

      url('font/web-font-regular.ttf')  format('truetype');



 font-weight: 400; /* 標準のフォント */


}





@font-face {



 font-family: 'my-font';

 src: url('font/web-font-light.woff')  format('woff'),



      url('font/web-font-light.woff2')  format('woff2'),

      url('font/web-font-light.ttf')  format('truetype');



 font-weight: 100; /* 細字のフォント */


}





@font-face {



 font-family: 'my-font';

 src: url('font/web-font-bold.woff')  format('woff'),



      url('font/web-font-bold.woff2')  format('woff2'),

      url('font/web-font-bold.ttf')  format('truetype');



 font-weight: 700; /* 太字のフォント */


}






@font-face {



 font-family: 'my-font';

 src: url('font/web-font-italic.woff')  format('woff'),



      url('font/web-font-italic.woff2')  format('woff2'),

      url('font/web-font-italic.ttf')  format('truetype');



 font-style: italic; /* イタリック体のフォント */

 font-weight: 400;


}

以上で定義したWebフォントを使用する時は定義した“font-family”プロパティ、“font-weight”プロパティや“font-style”プロパティの値を一致させて記述します。



/* 標準のフォント */

.regular-words {



 font-family: 'my-font';

 font-weight: 400;


}





/* 細字のフォント */

.light-words {



 font-family: 'my-font';

 font-weight: 100;


}





/* 太字のフォント */

.bold-words {



 font-family: 'my-font';

 font-weight: 700;


}






/* イタリック体のフォント */

.regular-words {



 font-family: 'my-font';

 font-style: italic;

 font-weight: 400;


}