2012年07月03日 category : Web tags : ,

Webフォントを使ってみよう!無料・画像編集なしでブログを装飾

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

GoogleWebFont

個人、商用問わず無料で使うことができるGoogle Web Fontを使ってブログを装飾してみます。

ウェブページを表示する際に使用しているフォントはPCに入っているフォントを使用しています。Windowsだけにあるもの、Macだけにあるものなどそれぞれのパソコンにインストールされているフォントを使って表示しています。

今回紹介するWebFontsとはPCに入っているフォントを使わずにサーバ上にあるフォントを使って表示できるという代物です。色々なWebFontsサービスがありますが、ここでは無料で利用できる「Google Web Font」を紹介します。

01 . Google Web Font って何?

「Google Web Font」はオープンソースで提供されているので個人、商用問わず無料で使うことができます。日本語には対応していないですがタイトルやメニューなどアクセントとして使う分には従来のように画像を用意するより簡単に使用できます。

メリット
・画像を用意、作成する必要がない・画像ではなくあくまでテキストなのでSEOに有利?

デメリット
ユーザで表示フォントを指定している場合があり、多様は避けたほうがよい

当ブログではメニュー部分に採用しています。こんな感じ

webfont

02 . Google Web Font を使ってみる

Google Web Font にアクセスします。Preview Textに文字を入力すると、入力した文字で各フォントのプレビューが確認できます。

webfont-preview

使いたいフォントが見つかったら「Quick-use」をクリックします。

quick-use

HTML用のリンクタグが表示されますので、COPYしてあなたのWebサイトのヘッダー部分に貼り付けます。WordPressではheader.phpの<head>〜</head>の間です。

<link href='http://fonts.googleapis.com/css?family=Squada+One' rel='stylesheet' type='text/css'>

HTML用のリンクタグの下にCSSが表示されますので使いたい箇所に「font-family」を指定したら完了です。こんな感じです。

h3{
	font-family: 'Chango', cursive;
}

03 . 複数のWebフォントをまとめて使用する方法

都度ヘッダーにリンクタグを追加してもいいのですが、使いたいフォントが複数ある場合はまとめることもできます。使いたいフォントが見つかったら「Quick-use」の代わりに「Add to Collection」をクリックします。

add-to-collection

するとページの下に用意されているコレクションに追加されます。「1 font family in your Collection」

your-collection

同様にもうひとつ使いたいフォントを「Add to Collection」してください。下のコレクションが「2 font families」に変わると思います。

この状態で「Review」をクリックするとコレクションに追加したフォントをプレビュー表示で一度に確認できます。「Use」をクリックすると先ほど1つだけ追加した時と同様にHTMLタグとCSSが表示されます。
リンクタグは1つ、CSSは2つ表示されていると思います。

review-use

使い方は一つの時と同じくリンクタグをヘッダーに貼り付け、CSSでそれぞれ使いたい「font-family」を呼んであげればOKです。

h1{ font-family: 'Eater', cursive; }
h2{ font-family: 'Chango', cursive; }

日本語には対応していませんが、アクセントとして使う分には画像を用意するよりずっと簡単に設置できますのでぜひ試してみてください。

※日本語に対応しているWebフォントも多数あります。ご利用の際は各サイトで規約を確認の上、使用ください。

HOME >>  Web > Webフォントを使ってみよう!無料・画像編集なしでブログを装飾