株式会社コプロシステム

お問い合わせ

2012年1月31日

Webフォントについてのまとめ

  • このエントリーをはてなブックマークに追加

前回のエントリーで、HTML5やCSS3のごく簡単なおさらいや、それらを使用した"次世代の可能性"を感じるwebサイトの事例を紹介させてもらいました。

今回のエントリーは"CSS3つながり"で、当バージョンから新たに導入された仕様「Webフォント」について、自分の備忘録的な意味合いが大きいのですが、まとめてみました。

Webフォントとは?

前述の通り、CSS3から新たに導入された仕様です。

今までのCSS2.1でも、「font-family」プロパティでフォントを指定できていました。
ただ、その指定したフォントが閲覧者のローカルPCにインストールされていないと、表示上その指定したフォントにはならず、別のフォントで表示されてしまっていました。

それと比較して、CSS3の「Webフォント」仕様では、サーバーにアップロードしたフォントファイルを読み込んで、webページのテキストフォントに反映させます。

なので、ユーザーのローカル環境に依存することなく、webページのテキストフォントを自由にカスタマイズできるのです。

Webフォントのメリットは?

今まで画像化で表現していたタイポグラフィもテキストだけで完結できるので、例えば以下のようなメリットがあります。

  • サイトの管理が楽になる。
    画像を編集→web用に書き出し→サーバーにアップ(×修正する画像の数) なんて作業はなくなり、サイト管理が楽になります。
  • ページの読み込みが軽くなる。
    画像を読み込む必要がなるので、ページの読み込み速度も速くなります。
  • 自動翻訳にも対応。
    一部ブラウザではwebページを自動翻訳してくれる機能が付いていますが、テキストなら対応できます。
  • SEOにも有効的。
    検索エンジンのクローラーは、webサイトのhtmlソースを読んでいるので、画像やFlashよりテキストの方がSEO対策上有効です。
  • 思い描いた通りのフォントになるので、見た目がキレイ。
  • コピー&ペーストができる。

などが挙げられます。
テキストシャドウなどある程度の装飾なら、CSSの他プロパティで十分ですし、
IE/Firefox/Chrome/Safari/Opera/iOS/Androidなど各種ブラウザも対応しています。

ただ、フォントの形式にもいろいろあります。

  • TrueType(.ttf)
  • OpenType(.otf)
  • WebOpenFontFormat/WOFF(.woff)
  • EmbeddedOpenType/EOT(.eot)
  • SVG Font(.svg)

これらのフォント形式によって、各種ブラウザの対応状況も違うようなので、場合によっては、同じフォントでも複数形式を設定する必要もあるようです。
フォント形式や各種ブラウザの対応状況については、以下のサイトに詳しく記載されていました。

CSS3のWebフォントを使ってみよう | Think IT
http://thinkit.co.jp/story/2011/08/18/2233?page=0,0
http://thinkit.co.jp/story/2011/08/18/2233?page=0,1

利用にあたっての注意点

概要だけ聞くと、メリットばかりに見えますが(上述ではそのように書いてますが)、注意すべき点ももちろんあります。

サーバーにアップして、CSSにフォントまでのパスを記述するわけですから、「再配布」に該当しライセンスの問題が発生しますので、どのフォントでもなんでもかんでも使っていいわけではありません。(当たり前ですが)
「著作権フリー」であっても、「再配布は禁止」というフォントもたくさんありますし、市販のフォントにいたっては言うまでもないですよね。

Webフォントはどこで探せる?

英文フォント

1. Google Web Fonts


2. FONT SQUIRREL


3. Open Font Library


4. fonts.com



和文フォント

5. フォントプラス


6. デコもじ


7. WebFonts として利用できるフリーの和文フォント | ヨモツネット



HTMLやCSSでできる新しい表現のひとつですね。
次回エントリーでは、Webフォントを利用したサイトの事例をご紹介したいと思います。

  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Webデザイン」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP