Webフォント

Webフォントとは

Webフォントは、Webコンテンツ側がフォントデータを持ち、Webブラウザなどのクライアントがそのデータに従って文字を表示するシステムです。これにより、Webデザイナーが意図したフォントをユーザー環境に依存せずに表示できます。

概要

従来のWebブラウザは、端末にインストールされたフォントを使用するため、デザイナーが意図しない表示になることがありました。Webフォントは、この問題を解決し、フォントによるデザインの制約を解消します。以前はフォントを画像として表示する方法もありましたが、文章の修正や検索に不便でした。

Webフォント技術は、Webサーバー上にフォントファイルを配置し、Webページから参照させることで、指定したフォントを表示させます。Webサーバー上のフォントファイル自体をWebフォントと呼ぶこともあります。

漢字のような文字数の多い言語では、Webフォントのデータサイズが課題でしたが、2010年以降、日本語に対応したWebフォントサービスが登場し、Google Fontsも日本語フォントの提供を開始しました。

歴史

Webフォント技術は、Webデザインの表現力を高めるために発展してきました。初期には、特定のブラウザのみが対応する形式や、画像による代替表示などが用いられていましたが、技術の進歩とともに、より柔軟で効率的なWebフォントの利用が可能になりました。

ファイルフォーマット

Webフォントには、様々なファイルフォーマットがあります。

TrueDoc
Embedded OpenType (EOT)
Scalable Vector Graphics (SVG)
TrueType/OpenType (TTF/OTF)
Web Open Font Format (WOFF)
Web Open Font Format 2.0 (WOFF2)

WOFF/WOFF2は、現在主流のフォーマットであり、多くのブラウザでサポートされています。

Webフォント対応ブラウザ

主要なWebブラウザは、Webフォントに対応しています。

Internet Explorer
Firefox
Chrome
Android標準ブラウザ
Opera
Safari

サブセット化とダイナミック・サブセッティング

サブセット化

Webページの表示速度を向上させるために、フォントファイルサイズを小さくする技術です。必要な文字だけを抽出したフォントのサブセットを作成し、Webページで使用します。

ダイナミック・サブセッティング

日本語や中国語のように文字数が多い言語において、動的にサブセットを作成する技術です。Webサイトで実行されるJavaScriptが、ページ内で使用されている文字を検出し、必要な文字のサブセットをサーバーから呼び出します。Adobe TypekitやTypeSquareなどのサービスで採用されています。

問題点

Webフォントは便利な技術ですが、いくつかの問題点も存在します。

ブラウザの設定やユーザースタイルシートによって、Webフォントが表示されない場合がある。
代替フォントが存在しないアイコンフォントでは、表示崩れが発生しやすい。

Webフォント提供サービス

様々なWebフォント提供サービスが存在し、商用フォントからフリーフォントまで、幅広い選択肢があります。

Google Fonts
Adobe Fonts
TypeSquare
FONTPLUS
DynaFont Online
REALTYPE
FontStream
ウェブフォントファン
もじでぱ

関連項目

カーニング

もう一度検索