超簡単!Google web fontsを使ってみたので、その使い方なんかをメモ

DATE - 2013/11/11 10:48
CATEGORY - WEBデザイン

超簡単!Google Web Fontsを使ってみたので、その使い方なんかをメモ

こんにちはノッティです。
今回の記事、今更ですか?という声が聞こえてきそうですが、今更なので仕方がありませんw

ただ、まだ使った事がない人もいるとは思いますので、自分自身のメモも兼ねてGoogle web fontsの使い方について紹介したいと思います。

そもそもWEBフォントとは?

WEBページを閲覧する際、通常はパソコンにインストールされているフォントでしか表示されませんが、WEBフォントを使用すれば、サイト制作者の意図するフォントで表示する事が可能になります。

そのWEBフォントにも、いくつか種類があり、無料から有料まで様々なサイトで紹介されています。

今回はその中でも、無料で使えて、尚かつ商用・非商用問わず使えるという「Google web fonts」の実装手順を紹介していきます。


Google web fontsを導入してみよう

まずは、Google web fontsにアクセス

google web fontsの使い方1

まずはGoogle web fontsのページにアクセスします。すると上の写真のようなページが出てきます。
英語ばかりで一瞬戸惑いますが、英語がわからなくても何の問題もありません。

プレビューしながら好きなフォントを探す

google web fontsの使い方1 写真の赤枠部分に好きな言葉を入力する事で、文字をプレビューできます。
実際にプレビューしながら、自分のサイトで使いたいフォントを探します。

Quick useをクリック

google web fonts使い方手順3 使いたいフォントが決まったら、写真の赤枠で囲まれている箇所「Quick use」をクリックします。

ヘッダーにソースを挿入

googlewebfonts使い方手順4 「Quick use」をクリックすると、フォントの太さや形を選択できる画面が表示され、下部にソースが表示されます。
そのソース(写真の赤枠に囲まれている部分)を使いたいページのヘッダーに記入
<link href='http://fonts.googleapis.com/css?family=使いたいfontの名称' rel='stylesheet' type='text/css'>

使いたい文字にcssを適用

googlewebfonts使い方手順5 写真の赤枠に書かれているcssを使いたい箇所に適用
font-family: '使いたいfontの名称', sans-serif;

■weightを指定した場合はこう書きます。
font-family: '使いたいfontの名称', sans-serif;
font-weight: 使いたいweight

これだけで完成

googlewebfont使い方手順7 ちなみに、この私のサイトではサイドカラムの赤枠で囲まれている箇所に「Quicksand」の700を使っています。
font-family: 'Quicksand', sans-serif;
font-weight: 700;


まとめ

新しい事って、楽しい反面、なかなか手こずったりする物ですが、google web fontsはとっても簡単に導入できます。
その為、どんどん使いたくなるのですが、それはNG。

同じサイト内で複数のフォントを使う事は、WEBデザイン上好ましくないので気をつけましょう。と、自分に言い聞かせてみる。

まだ、使った事がない人は試してみるのもいいかもしれませんね。

おわり


Advertising

PageTop