最近巷で「Webフォント」という言葉をよく見かけるわけですが、まだ実際に使用したことがないので、今後使う時のことを考えてサラリと調べてまとめてみました。
「Webフォント」とは
CSS3で新たに導入された仕様でWeb上からフォントを表示する技術のことです。
通常Webブラウザはパソコンにインストールされているフォントを呼び出して文字を表示しますが、例えば閲覧しているWebサイトにパソコンにインストールされていないフォントが存在した場合、そのフォントを表示することはできませんでした。
WebフォントはWebサーバ上にフォントファイルが存在しているので、パソコンにインストールしていない場合でも、指定したフォントを表示することができます。
「Webフォント」提供サイト
Webフォントを提供しているサイトは、欧文フォント、日本語フォント、アイコンフォントなど、いろいろあるので自分好みのフォントを見つけてみて下さい。
Google Fonts 欧文フォント / 無料
League Gothic 欧文フォント / 無料
Font Squirrel 欧文フォント / 無料
Fontspring 欧文フォント / 有料（一部無料あり）
Typekit 欧文フォント / 有料（体験プラン無料）
Fontdeck web fonts 欧文フォント / 有料
Fonts.com 欧文＆日本語フォント / 有料＆無料
TypeSquare 日本語フォント / 有料
WEBフォント｜アマナイメージズ 日本語フォント / 有料（お試し無料あり）
FONTPLUS 日本語フォント / 有料
もじでぱ 日本語フォント / 有料
デコもじ 日本語フォント / 有料
Realtype Project 日本語フォント / 有料
「Google web fonts」について
無料でオープンソースで尚且つアカウント登録せずに使用可能は「Google web fonts」は最も有名で人気があるWebフォントのの一つです。数百ものWebフォントを提供しているのでいろいろなWebサイトで活用できます。
ちなみに「Google web fonts」の使い方は簡単で、
1. Google web fontsのサイトにアクセスする
2. 好みのフォントを探す
3. 利用したいフォントにチェックを入れて次へ進む
4. 発行されたコードをコピーする
5. Webサイトのhead内に貼り付けする
という流れで使用できます。
使用方法について詳しくは書き記事を参考にしてみて下さい。スクリーンショット付きでわかりやすく説明されています。
今さらながらWebフォント「Google web fonts」の使い方・実装手順メモ | OZPAの表4
Web Fontsの歴史と使い方（3）：Google Web Fontsから好きなフォントを使ってみよう – ＠IT
デザイナーなら知っておかないと損するGoogleWebフォント特選10個 | Find Job ! Startup
Googleフォントを利用している、参考お手本WebサイトデザインまとめPhotoshopVIP |
個人的な感想
まだ使用したことはないのですが、次回のWebサイト制作では活用してみたいと思います。画像をWebフォントに置き換えることで軽くて読み込み速度が速いWebサイトを実現できるかも？なので。
