Webフォント

WebフォントはWWWのコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化（レンダリング）をともなうクライアントが文字表示（カーニング）を行うシステムおよびそのフォントである。CSS3.0 fonts moduleで、この機能の標準が提供された。

概要 
元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。またはWebサーバー上に置かれるフォント自体をWebフォントと指し、フォントをWebで利用するよう提供するサービスをWebフォントサービスとして区別する。

漢字は膨大な数であり、Webフォントのダウンロード量など、ラテン文字と比較して課題がある。
しかし2010年、2011年頃から日本語に対応したWebフォントサービスが開設されている。また、Google Fontsも2014年頃から日本語フォントが追加されている。

Webフォント

歴史

ファイルフォーマット

TrueDoc

Embedded OpenType

Scalable Vector Graphics

TrueType/OpenType

Web Open Font Format 

Web Open Font Format をサポートするブラウザは、Mozilla Firefox 3.6+、 Google Chrome 5+、
Opera Presto,
、Internet Explorer 9 (2011年5月14日)。Mac OS X LionのSafari  5.1。

Webフォント対応ブラウザ
 IE (eotのみ)
 Firefox
 Chrome
 Android標準ブラウザ
 Opera
 Safari

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

サブセット化 
ページの読み込みを高速化するためには、フォントのファイルサイズを小さくする必要があるため、必要な字だけを含むフォントのサブセット（フォントを一部の文字数にしたもの）を作ることがある。これをサブセット化という。

ダイナミック・サブセッティング 
日本語や中国語のような言語では、文字が多いため元のフォントに収録される文字全てを合わせると、数メガバイトの容量に至ってしまう。このため、サブセット作成を動的に行う技術が用いられ、ダイナミック・サブセッティングとよばれる。Webサイトで実行されるJavaScriptで、ページ内で使用される全ての文字を検出し、必要となる文字をサブセットとしてサーバーから呼び出す仕組みである。

Adobe TypekitやTypeSquareではこの技術が採用されている。

問題点 
ブラウザー側で「ウェブサイトで指定したフォントを使用しない」設定を有効にしたり、ユーザースタイルシートを使用している場合、Webフォントが表示されなくなる場合がある。特にこの問題は、アイコンフォントのような、閲覧環境に代替するフォントが存在しない場合に顕著である。

Webフォント提供サービス 
 Google Fonts
 Adobe Fonts
 Adobe Edge Web Fonts
 TypeSquare - モリサワとタイプバンクの和文Webフォントが有料で提供されている。MORISAWA PASSPORTにも利用権が付属している。
 FONTPLUS - フォントワークス、イワタ、モトヤ、白舟書体、モリサワの和文Webフォントが有料で提供されている。
 DynaFont Online - ダイナコムウェアが提供する有料和文Webフォントサービス。和文以外に中国語簡体字・繁体字も提供されている。2019年4月以降は同社の「DynaSmart」シリーズに利用権が付随する形となっている。
 REALTYPE - 自作のフォントを登録してWebフォントとして販売、利用できるWebフォントプラットフォーム。
FontStream - タイプラボ、欣喜堂などの和文Webフォントが有料で提供されている。
 ウェブフォントファン - 和文Webフォント、Wordpress用フォントプラグインが有料で提供されている。
 もじでぱ
 WebLiFEサーバー
 Fontdeck
 Fonts.com
 Fontspring
 Font Squirrel

関連項目 
 カーニング

脚注

外部リンク 
 WebフォントのCSSとライセンス記載例 - Qiita
 Google Fonts
 【簡単】Webフォントの使い方！Google web fontsを使ってみよう - FASTCODING BLOG
 Google が提供する日本語 Web フォント - Qiita
 外字Web Server - ダイナコムウェア株式会社
 Webフォントの設定【サーバにフォントをインストール】 - SEO白書

Webふぉんと
Webふぉんと
ウェブデザイン
ウェブ技術