日本語「Webフォント」の利用方法とメリット・デメリット

Webフォントとは

今までは指定したフォントがインストールされていない環境では思った通りに表示されませんでした。
WEBフォントであればWEBからインストールするのでどの環境でも同じように表示されます!

今までの場合は多くのサイトは好みのフォントをPNGやJPEGに画像変換してタイトルロゴ、ボタンなどに使っていました。
例えばこのサイトの以前使っていたタイトルロゴには商用利用無料の「にくまるフォント」をPNG画像に変換して使っていました。

logo_matometaru

nikumaru-font

これをテキストで表示しても皆さんのパソコンに「にくまるフォント」がインストールされていないため意図した通りに表示されません。

自分のパソコンで表示できるフォントを確認したい場合は以下のサイトが便利です。
ブラウザで表示できるフォントが確認できるサイト|Type Zebra

利用方法

私の知る限り2通りの方法があります。

  1. Webフォントのサービスを利用する
  2. 自分のサーバーにおいて利用する

1.Webフォントのサービスを利用する

GoogleFontsのようなWebフォントサービスです。
CSSを指定するだけで、簡単に利用できます。

http://www.google.com/fonts/#

Webフォント(Google Web Fonts)の使い方

2.自分のサーバーに置いて利用する

自分で作成したフォントや、フォント製作者からダウンロードしたフォントを利用したい場合は自分のサーバーに置く必要があります。
フォントのライセンスの問題や、複数のフォーマットを用意する必要があるなど、Webフォントサービスを利用するより少し複雑です。

ちなみにこのサイトのタイトルは「2.自分のサーバーに置いて利用する」でWebフォントを表示しています。他のフォントを使う際も手順は同じなので参考になるかもしれません。
【Webフォント】タイトルを無料で使える「Noto Sans CJK」に変更してみた!

メリット

  • ビットマップ画像とちがいベクター形式なので拡大表示、高解像度ディスプレイでも劣化なし
  • テキストなので画像よりばSEOにつよい

デメリット

  • 古いブラウザには対応していない。
  • 使えるフォントが少ない

日本語使えるフォント

Noto Sans

「Noto Sans CJK JP」
ライセンス:Apache License, Version 2.0

JapanSans

有料です。Wordpressのプラグインとして用意されいるので一番簡単でメンテナンスも楽そうです。
http://webfontfan.com/japansans/
ライセンス:

にくまるフォント

にくまるフォントのライセンスは以下のとおりです。

※M+ OUTLINE FONTS はコンピュータなどでの個人利用をはじめ、商業目的での利用、フォント内容の改変、改変後の再配布にも制限の無い、自由なライセンスで公開しているアウトラインフォントです。

これらのフォントはフリー(自由な)ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、
複製、再配布することができますが、全て無保証とさせていただきます。

なので「2.自分のサーバーに置いて利用する」でにくまるフォントをWebフォントとして使うことができるはず。

まとめ

これからはWebフォント

スポンサーリンク
RESAD
RESAD

シェアする

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

フォローする

スポンサーリンク
RESAD