BLOG

2015年2月20日/ Google Fonts, WEBフォント,

いまさら聞けない。Webフォントの基礎とGoogle Fontsの使い方

こんにちは、デザイナーの中西です。
デザイナーたるもの文字とお友達になってなんぼ!と思いつつも、知れば知るほど遠い存在になってゆく奥深い文字の世界。。。

 

さて、そんな文字について、Webの世界でも2011年頃からWebフォント元年なんて言われ始めてはや4年。
その登場のおかげで、いまやタイポグラフィWebデザインの中でグッと重要な存在になり、海外サイトなどではすっかり浸透、多くのサイトで使用されています。
しかし、国内のサイトでは徐々に使用されてるサイトは増えつつあるものの、まだまだ普及段階。

 

これからデザインに取り入れてみよう!というWebフォント初心者デザイナーのために改めてWebフォントの基本をおさらいしたいと思います。

 

今さらの今さら、Webフォントって何?

これまでWebの文字表現については、ブラウジングする端末にインストールされたフォントに依存していました。
そのため、意図した通りのフォントで表示させるためには画像化する等して対応するしかありませんでした。

 

Webフォントを使うと、サーバー上に置かれたフォントファイルを読み込んで表示するため、ユーザー環境に左右されることなく、製作者が意図したフォントで表示することができます。

ちなみに当サイトでも見出しに「Acme」というWebフォントを使用しています。

 

acme

 

Webフォント使って良かった!ここが便利な7つのメリット。

 

  • 画像化しなくていいので、作成・変更・更新がラックラク♪
  • 画像ファイルが少なく管理もラックラク♪
  • CSSでシャドウなどのスタイルを作れる
  • テキストなのでデザインのポイントとして見出し等、大きなタイポグラフィとして使ってもファイルサイズが気にならない
  • テキスト選択が可能なので、拡大縮小やコピー、読み上げ機能が使えてユーザーに優しい
  • テキストデータなのでSEO的にも効果あり(altを指定する手間もなし)
  • レスポンシブなデザインにも手軽に対応

 

やはり最大のポイントは、一つのサイトにいくつも存在する見出しやタイトル画像をいちいち作成する必要がなくなることでしょうか。
これによって、大幅な工数の削減、制作コストの削減が可能になります。
マルチデバイス向けにいちいちリサイズ画像を作る必要が無くなるのは相当ありがたいですよね。

 

Webフォントのデメリット

そんな嬉しいことだらけのWebフォントにも下記のような多少のデメリットがあります。

 

  • バイト数の大きいWebフォントの場合、表示が重くなる場合もある
  • 日本語Webフォントはお金がかかる場合が多い
  • うっかり文字泥棒にならないように。ライセンスの問題

 

サーバーにフォントファイルをアップしそれを参照するということは、誰でもそのフォントファイルを手に入れることができる状態ということ。
つまり再配布に当たるため、ライセンスの問題が発生します。

 

そのため、自身で購入したフォントだからといっても安易にサーバーにアップすることはNGです。
また、フリーフォント等で著作権フリーのフォントであっても再配布は禁止というフォントも多いのでライセンスには注意が必要です。

じつは超簡単!Webフォント導入手順!

それでは実際にWebフォントを使用する方法を確認しましょう。
ここでは2つの方法を紹介しますが、いずれも超簡単です。

 

サーバーへフォントファイルをアップロードして使用する方法

1.使用するフォントを用意(サーバーへアップロード)

 

2.CSS3の@font-faceでフォントファイルを読み込ませる

以下のコードをCSSに記述。パスは相対でも絶対でも大丈夫です。

 

3.HTML/CSSでフォントを適用する

HTML/CSSそれぞれに下記のように記述。もちろんセレクタは任意のものに変更してください。

HTML

CSS

以上で完了。非常に簡単ですね。

 

Google Fontsを利用する方法

また、別の方法で、Googleの提供するGoogle Fontsを利用する方法もあります。
Google Fontsは商用・非商用問わず無償で利用可能なので安心して使うことができます。
またアカウント登録等のめんどくさいステップも不要!アップロードも必要ありません!超お手軽。

 

1.使いたいフォントを探す

まず、「Google Fonts」にアクセスし、使いたいフォントを探します。

 

google_fonts

 

フォントのスタイルやウェイト等から絞り込んだり、直接キーワードで検索したりすることができます。

 

google_fonts

 

使用するフォントを決定したら、赤枠の部分をクリックします。

google_font

「1. Choose the styles you want」で使用するウェイトを選びます。
この時、ファイルサイズが大きくならないよう必要のないウェイトは選ばないようにしましょう。

 

google_fonts

「2. Choose the character sets you want」では文字の種類を選択します。
英語アルファベット・数字・記号の表示だけであれば「Latin」だけ選択すれば問題ありません。

 

 

2.HTMLもしくはCSSに記述

google_fonts

「3. Add this code to your website」で表示されたコードをHTMLのhead内にペーストします。

もし、cssで読み込んだ方が都合がよい場合は「@import」タブをクリックし、表示されたコードをCSSにペーストします。

 

3.フォントを適用する

google_fonts

「4. Integrate the fonts into your CSS」で表示されるコードをCSSで任意のセレクタにペーストし、HTMLで呼び出して完了です。

CSS

HTML

Google Fontsを使えば、フォントをサーバー上にアップロードする必要がない上、現時点(2015/02/16)で671種類と豊富なフォントが利用可能なのでとても便利です。

 

おわりに

これからのWebデザインを大きく変えてくれるWebフォント

 

まだまだ取り上げるべき項目(特に日本語Webフォントについてなど)があったり、Webフォントの使い方に関してもその他細々と気にすべき点はあるのですが、Webフォントをとりあえず使ってみたい!というデザイナーさんは、上記の方法でパパパッと使ってみてください!
そうすれば、Webデザインのレベルがひとつ上がった…気になれます。

くれぐれもライセンスには注意してくださいね!

 

Resent Posts

Category