Webフォント

IT用語辞典バイナリ

Webフォント

読み方：ウェブフォント
【英】Web Font, Web Fonts

Webフォントとは、インターネットを通じてフォントを配信することで、ローカル端末に該当するフォントがインストールされていなくても、指定されたフォントを再現できる機能のことである。CSS 3の新機能としてサポートされた。

従来、HTMLやCSSでフォントを指定しても、閲覧者側のローカル端末にそのフォントがインストールされていなければフォントは再現できず、代わりに別なフォントが用いられるようになっていた。そのため、あまり特殊なフォントは用いられず、スタンダードなフォントを指定しておくことが原則となっていた。Webフォントを利用すれば、ユーザー側の環境に関わらず同じフォントで表示させ、統一的なイメージを保つことが可能になる。

Webフォントを配信している主なサービスの例としてGoogleが提供しているオープンソースのWebフォント配信サービス「Google Web Fonts」などを挙げることができる。

---

参照リンク
Google Web Fonts

情報処理のほかの用語一覧

フォント：	T書体フォント  等幅フォント  ドットフォント  Webフォント  游ゴシック
単位：	エクサ  エクサ級

>>フォントカテゴリの他の用語

ウィキペディア

Webフォント

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2025/01/12 07:37 UTC 版)

ウィキペディアなどでのWebフォントの利用については、言語メニューの設定から、フォント→「フォントが必要な際にダウンロードする」です。詳細は「ユニバーサル言語選択拡張」を参照。

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

概要

元来、webブラウザは端末にインストールされているフォントを呼び出し文字を表示するが、端末にそのフォントが無ければ、Webデザイナーが意図しない表示がなされてしまうため、フォントに関するWebデザインに制約が生じていた。フォントを画像にして表示するという手はあるものの、文章修正のメンテナンス、文章の検索といった点で問題があった。

そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。またはWebサーバー上に置かれるフォント自体をWebフォントと指し、フォントをWebで利用するよう提供するサービスをWebフォントサービスとして区別する。

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

Webフォント

歴史

この節の加筆が望まれています。

ファイルフォーマット

この節の加筆が望まれています。

TrueDoc

Embedded OpenType

→詳細は「OpenType」を参照

Scalable Vector Graphics

→詳細は「Scalable Vector Graphics」を参照

TrueType/OpenType

→詳細は「TrueType」および「OpenType」を参照

Web Open Font Format

→詳細は「Web Open Font Format」を参照

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

Webフォント対応ブラウザ

• IE (eotのみ)
• Firefox
• Chrome
• Android標準ブラウザ
• Opera
• Safari

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

サブセット化

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

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

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

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

問題点

ブラウザー側で「ウェブサイトで指定したフォントを使用しない」設定を有効にしたり、ユーザースタイルシートを使用している場合、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

関連項目

• カーニング

脚注

[脚注の使い方]

1. ^ “国内初の日本語対応ウェブフォントサービス「デコもじ」を開始ウェブフォント関連事業に本格参入”. Ascii.jp (2010年5月10日). 2013年4月10日閲覧。
2. ^ “ソフトバンク・テクノロジー社の「フォントプラス」がフォントワークス書体に対応”. フォントワークス (2011年7月27日). 2013年2月11日閲覧。^{[リンク切れ]}
3. ^ “クラウドフォントサービス「TypeSquare（仮称）」を発表”. モリサワ (2011年8月10日). 2013年2月11日閲覧。
4. ^ 安田英久 (2015年3月10日). “Web担当者Forum 編集長ブログ グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？”. 2017年4月24日閲覧。
5. ^ Shapiro, Melissa (2009-10-20), Mozilla Supports Web Open Font Format, Mozilla, http://blog.mozilla.com/blog/2009/10/20/mozilla-supports-web-open-font-format/ 2010年2月5日閲覧。 
6. ^ Gilbertson, Scott (2010-04-26), Google Chrome to Support the Web Open Font Format, webmonkey, http://www.webmonkey.com/2010/04/google-chrome-to-support-the-web-open-font-format 
7. ^ Bug 38217 - [chromium] Add WOFF support, WebKit, https://bugs.webkit.org/show_bug.cgi?id=38217 
8. ^ Web specifications support in Opera Presto 2.7, Opera, http://www.opera.com/docs/specs/presto27/ 
9. ^ Galineau, Sylvain (2010-04-23), Meet WOFF, The Standard Web Font Format, Microsoft, http://blogs.msdn.com/ie/archive/2010/04/23/meet-woff-the-standard-web-font-format.aspx 
10. ^ Kaplan, Gregor (2015年6月16日). “日本のお客様へ。日本および東アジアのWebフォントへの対応と新しいフォント選択ツールに関するお知らせ。”. The Typekit Blog. 2024年2月5日閲覧。

外部リンク

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

表 話 編 歴 タイポグラフィ
印刷	木版印刷 木版 活版印刷 写真植字 写真植字機 電算写植 プリンター 版下 製版 紙型 鉛版 輪転印刷機 フレキソ 軽印刷 ルミライト印刷 レーザープリンター インクジェットプリンター 凹版印刷 オフセット印刷 シルクスクリーン コンピューター・トゥ・プレート 複合機 ステンシルテンプレート
組版	活字 写真植字 写真植字機 電算写植 CTS DTP 縦組み 横組み 縦書きと横書き 詰め組み 活字鋳造所 プリンター タイプデザイン etaoin shrdlu lorem ipsum パンチカット パングラム JIS X 4051
ページ	ページ付け 左右ページ レクトとヴェルソ 裁断 余白 段組 文字揃え ページ作成法 プルクオート 製本
紙	紙の寸法 判型 国際判 ISO 216 レターサイズ 菊判 タブロイド B40 四六判 スティックポスター 封筒
文字	合字 カーニング 詰め組み 大文字と小文字 大文字 小文字 スモールキャピタル イニシャル ダイアクリティカルマーク 字形 上付き文字 下付き文字 ディングバット 絵文字 字体 レタリング インキトラップ
書式	立体 斜体 太字 全角と半角 半角カナ 圏点 傍線 下線 打ち消し線 網掛け 袋文字 影付き文字 囲み文字 カラー文字
欧文書体	セリフ サンセリフ ローマン体 イタリック体 ブラックレター体 フラクトゥール ゲール体 スクリプト カリグラフィー 筆記体
漢字仮名書体	五体 篆書体 隷書体 楷書体 鍾繇体 痩金体 六朝楷書 草書体 行書体 印刷 宋朝体 明朝体 楷書体 ゴシック体 アンチック体 丸ゴシック体 タイポス系 ファンテール体 その他 江戸文字 丸文字 連綿体 ステンシル体
フォント	TrueType PostScriptフォント OCFフォント CIDフォント OpenType BDFフォント プロポーショナルフォント 等幅フォント フォントヒンティング Webフォント WOFF
約物	段落記号 リターン記号 ぶら下げ組み ハイフン 引用符 ダッシュ
単位	ポイント パイカ シセロ em en アガート メジャー Q数制
DTP	文字化け 写植ソフト TeX 文字コード 文字コード表
カテゴリ

ウィキペディア小見出し辞書

Webフォント

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2022/05/10 02:51 UTC 版)

「フォント」の記事における「Webフォント」の解説

Webフォントは閲覧環境に存在しない書体を表示するために、Webサイトと同時に読み込まれるフォントである。Webフォントは幅広いブラウザで表示することができるため、デバイス間の文字表示の差異を吸収する役割をもたらす。画像による文字の表示よりもセマンティックにコンテンツを表現することができる。