Webフォント 【Web Font】

概要

Webフォント(Web Font)とは、CSSの機能の一つで、ページ中のテキスト(文字)の表示に利用するフォント(書体)データを指定した場所からダウンロードして即座に適用できるようにするもの。

WebページHTML文書)の見栄えを指定するCSSCascading Style Sheets)では、font-familyプロパティなどで文字を表示する際のフォントを指定することができるが、従来は指定したフォントが表示側のコンピュータに導入されていなければ適用することができなかった。

WebフォントはフォントファイルをWebサーバ上に置いておき、表示するコンピュータに存在しない場合はその場でダウンロードして取り寄せ、ページの表示内容に反映させる仕組みである。画像の読み込みなどと同じように、フォントを置く場所はWebページと同じサーバ上でも外部のサーバでも構わない。

CSSでは「@font-face」ルールを用いて指定する。「@font-face: {font-family "My Font" src:url("/MyFont.woff") format("woff")} のように記述すると、サーバ上で絶対パス指定した「/MyFont.woffファイルを「MyFont」というフォントファミリ名で参照できるようになる。以降は「font-family: MyFont;」のように指定した箇所にこのフォントが適用される。

WebフォントのフォントファイルはWOFF(Web Open Font File)形式(ファイル名拡張子.woff)かバージョン2であるWOFF2形式(.woff2)が用いられる。フォントデータの形式は広く普及しているTrueType形式と同じであり、TrueTypeフォントWOFF形式に変換したり、ページ上の文字だけ抜き取った特別なWOFFファイルを作成することもできる。

Web上には米グーグルGoogle)社の「Google Fonts」(Googleフォント)のようにWebフォントを公開および配信するサービスもあり、フォントファイルを作成して自分のWebサイトに用意しなくても、配信サービスて公開されているフォントを呼び出して適用することができる。

(2023.12.7更新)

他の辞典による解説 (外部サイト)

この記事の著者 : (株)インセプト IT用語辞典 e-Words 編集部
1997年8月より「IT用語辞典 e-Words」を執筆・編集しています。累計公開記事数は1万ページ以上、累計サイト訪問者数は1億人以上です。学術論文や官公庁の資料などへも多数の記事が引用・参照されています。
ホーム画面への追加方法
1.ブラウザの 共有ボタンのアイコン 共有ボタンをタップ
2.メニューの「ホーム画面に追加」をタップ
閉じる