「Webフォント」に関して参考サイトや使い方などをまとめてみた。

フォント

f:id:lord_cashew:20140211103652p:plain

最近巷で「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サイトを実現できるかも?なので。