公開日：2023-07-01
Webフォントとは、Webサイト上でCSSを使って自由にフォントを表示するための技術である。PCに依存しない技術として注目されており、CSS3の普及に伴いWebフォントの開発が進んでいる。Webデサインにあったフォントを利用できる事や、デザイン性の高い文字も画像ではなく、文字で記述できるので SEO 的に有利であるなどメリットがある。
Webフォントの歴史
従来、Webサイト上のフォントは、あらかじめ制作サイドが使用するフォントを指定し、Webブラウザが各端末に搭載されているフォントを表示される方法がとられてきた。しかし、特に家庭用PCの場合、標準搭載されているフォントは少なく、また各端末のOSによって搭載されているフォントは異なるため、使用できるフォントの選択肢は限られていた。また、指定されたフォントが各端末にない場合、別のフォントが代用されてしまい意図したものと異なる表示となる、という課題があった。
各OSの標準搭載フォント
| windows初期 | MSゴシック・MS明朝／MSPゴシック・MSP明朝／MS UI Gothic |
|---|---|
| windowsVista | メイリオ |
| windows7 | Meiryo UI |
| windows8.1 | 游ゴシック・游明朝 |
| windows10 | UDデジタル教科書体・Yu Gothic UI |
| MacOS X 10.4 | ヒラギノ角ゴシック Pro・ヒラギノ明朝 Pro・iOS HiraKakuProN-W3・HiraMinProN-W3 |
| MacOS X 10.5以降 | ヒラギノ角ゴシック ProN・ヒラギノ明朝 ProN・ヒラギノ角ゴシック Pro・ヒラギノ明朝 Pro |
| Android 4.0 | モトヤLシーダ3等幅・モトヤLマルベリ3等幅 |
こうした課題解決のため、CSS3より策定された技術がWebフォントである。サーバー上にあるフォントデータをダウンロードして使用できるため、閲覧者の端末に左右されずに意図した表示ができるようになった。Webフォントは、CSS3の普及とともに、欧文フォントをはじめ世界中で広く使用されるようになるが、文字数の多さやデータ量の大きさから、日本語Webフォントの普及は遅れている。
日本語Webフォントの普及
- 2010年～2011年頃
- 日本語Webフォントサービス開設（デコもじ／シーサー株式会社、TypeSquare／モリサワなど）
- 2014年
- Google Fontsにて日本語Webフォントが追加（ベータ版）
- 2018年
- Google Fontsにて日本語Webフォントが正式サポート開始
日本語Webフォントについて
Webフォントが普及している海外サイトと比べて、日本ではいまだWebフォントを導入したサイトは多くはない。その理由として、「日本語は文字数が多くデータ量が大きいため、表示速度が低下するリスクがある」「日本語対応のWebフォントが少ない」ことが挙げられる。
しかし、技術の向上により、膨大な数の日本語文字（漢字・ひらがな・カタカナなど）データを一度にダウンロードするのではなく、例えば、日常的に使われる漢字以外は省いてダウンロードさせることで、速く表示させる方法が登場（「サブセット化」）。さらに、「キャッシュを利用する方法」（Web フォント情報をブラウザにキャッシュされるように設定することで、一度閲覧したページに含むWeb フォントを使用しているページであれば、速く読み込むことが可能）や「Webフォントの読み込みを非同期で行う方法」（非同期の状態でWebフォントを読み込み、完了するまでの間は代替 フォントで ページを表示させることが可能）などのテクニックがある。欧文Webフォントと比べると、まだまだ数が少ないが、技術の向上や様々なテクニックにより、日本語Webフォントの利便性は向上している。
Webフォントの使い方
Webフォントは、簡単な手順で使用することができる。方法としては大きく分けて２通り。
サーバーに使用したいフォントをアップロードする方法
- 使用したいWebフォントを探し、フォントファイルをサーバーへアップロード
- CSS3の「@font-face」で使用するフォントの「フォントファイル」と「ファイルパス」を指定
@font-face {
font-family: '使用フォント名';
src: url('使用フォント名.eot');
url('使用フォント名.woff') format('woff'),
url('使用フォント名.ttf') format('truetype'),
url('使用フォント名.svg') format('svg');
} - CSSで使用したい箇所に「font-family」を設定し、完了。
p {font-family: 'フォント名';}
Webフォントを提供するサービスを利用する方法
- Webフォントサービスで使用したいフォントを選択（Google Fonts、TypeSquareなど）。
- 選択したフォントの読み込みタグをコピーし、HTMLの＜head＞～＜/head＞内に貼りつける。
例：Google Fontsの場合
＜head＞
＜link href='http://fonts.googleapis.com/css?family=フォント名' rel='stylesheet' type='text/css'＞
＜/head＞ - CSSで「font-family」を設定し、完了。
p {font-family: 'フォント名';}
有料Webフォントと無料Webフォントの違い
Webフォントには、有料と無料のものがある。有料Webフォントには、従量課金（PV数依存）や一括払いなどの料金プランがあり、各サービスによって異なる。日本語Webフォントには、無料の種類が少ない一方、欧米言語のWebフォントは無料・有料共に種類が豊富にある。
Google Web Fontsとは
Googleが提供する完全無料のWebフォントサービス。商用利用も無料で導入も比較的簡単にできるため、世界中で利用されている。近年、日本語対応のWebフォントも正式に採用された。
Google Web Fontsの利用方法
- Google Fontsのページより使用したいフォントを選択（フォント右上にある「＋」をクリック）
- フォントのスタイルを設定（画面右下にある黒いバーの「－」をクリック、「CUSTMIZE」から可能）
- スタイル設定後、「ENBED」からフォントの読みコードを取得し、コピー。
- コピーしたコードを、サイトの＜head＞タグ内に貼る（ブログサービスにより多少場所は異なる）。
※CSSから読み込む方法：「@import」をクリック、表示されるコードをコピーしCSSファイルに貼る。
- CSSでfont-familyに使いたいフォント名を記載し、完了。
Webフォントを使うメリット・デメリット
Webフォントの使用には、メリット・デメリットが存在する。
Webフォントのメリット
- 閲覧者の環境に依存せず、同一に表示が可能
Webフォントはサーバーからフォント情報を取得するため、閲覧者がどのようなデバイスを使用していても同じフォントを表示することができ、意図したデザインを表現することができる。 - SEOに有利である
画像を使わずテキストデータとして利用できるため、画像化した場合と比較して、SEO（検索エンジン最適化）の観点から有利となる。 - ユーザビリティが高まる
画像を使わずテキストデータとして利用できるため、文字の選択が可能となり再利用しやすくなる。また、音声読み上げソフトや自動翻訳などにも適している。 - レスポンシブ対応がしやすい
画像を使わずHTMLと CSSの記述のみで表示できるため、レスポンシブ対応に適している。 - メンテナンスが向上する
画像を使わずHTMLと CSSの記述のみで表示できるため、編集がしやすい。 - 主要ブラウザがサポートしている
PCはもちろん、スマートフォンやタブレット端末含め、主要ブラウザがWebフォントに対応している。
Webフォントのデメリット
- 日本語対応のWebフォントが少ない
文字数の多さやデータ量の多さから、欧文フォントと比べて日本語Webフォントの選択肢が少ない。 - 表示速度が遅くなることがある
日本語Webフォントのように容量が大きいWebフォントの場合、フォントデータの読み込みに時間がかかり、表示速度が遅くなる。 - 使用料が発生することがある
有料Webフォントの場合、Webフォント提供サービスの規定に伴って、従量課金（PV数依存）や一括払いなどの費用が発生する。 - 利用上の制限がかかることがある
無料フォントの場合、Webフォント提供サービスによって利用規約が異なるが、商用利用ができないもの、ライセンス表記が必要なもの等があり、注意が必要となる。
Webフォントの活用事例
Google Fontsを利用したWebフォントの活用事例は下記の通り。
-
Robot
Simplicity is the ultimate sophistication. ／Regular 400
Simplicity is the ultimate sophistication. ／Bold 700 -
Raleway
Simplicity is the ultimate sophistication. ／Regular 400
Simplicity is the ultimate sophistication. ／Bold 700 -
Noto Sans JP
シンプルであることは究極の洗練だ。 ／Regular 400
シンプルであることは究極の洗練だ。 ／Bold 700 -
M PLUS 1p
シンプルであることは究極の洗練だ。 ／Regular 400
シンプルであることは究極の洗練だ。 ／Bold 700 -
Sawarabi Mincho
シンプルであることは究極の洗練だ。 ／Regular 400