ウェブフォントとは?
うぇぶふぉんと
ウェブフォントとは、ウェブページを表示する際にサーバーからフォントデータをダウンロードして使用する仕組みで、閲覧者の端末にインストールされていないフォントも表示できます。
ウェブフォントとは、ウェブページのデザインに特定のフォントを使用するため、フォントデータをサーバーから読み込む技術です。従来のウェブデザインでは、利用者のパソコンやスマートフォンにインストールされているフォントしか使えなかったため、デザイナーが意図した書体を全ての閲覧者に届けることが困難でした。
ウェブフォントはCSSの@font-faceルールを使って定義し、フォントファイルをウェブサーバーやCDN(コンテンツ配信ネットワーク)に置いておきます。ページが読み込まれるとブラウザが自動的にフォントをダウンロードし、指定した要素に適用します。
主なウェブフォントのファイル形式には次のものがあります。
- WOFF / WOFF2(Web Open Font Format)— ウェブ専用に圧縮された形式で最も広く使われる
- TTF / OTF — TrueType・OpenType形式をそのまま配信
- EOT — Internet Explorer向けの古い形式
Google FontsやAdobe Fontsのような無料・有料のウェブフォントサービスを利用すると、コードを数行追加するだけで多彩な書体を使えます。ただし、フォントデータの読み込みはページの表示速度に影響するため、フォントのサブセット化(必要な文字だけ抽出)や遅延読み込みなどの最適化が重要です。日本語フォントは文字数が多くファイルサイズが大きくなりがちなため、特に注意が必要です。
使い方・例文
ウェブサイトのヘッダーに独特の手書き風フォントや明朝体を表示したいとき、Google Fontsのリンクをhtmlに貼り付けるだけでウェブフォントを利用できます。
この用語をシェア
最終更新: