グーグルフォント

Google Fontsの使い方と装飾方法

Googleが提供しているwebサービスの「Google Web Fonts」は、無料で使用できるwebフォントです。 無料で利用できる割りにフォント数も多く、今では数多くのサイトに使用されています。
しかもユーザー登録不要、ダウンロード不要でとっても簡単に使う事ができるのでオススメです。
このページでは「Google Fonts」を利用したwebページの装飾・デコレーションについてや、「Google Fonts」の導入方法や使い方を紹介します。 あとWordPressでグーグルフォントを使う方法も掲載しています。

Google webフォントの使い方

グーグルフォントを使用するには、「フォントを選ぶ」「CSSで呼び出す」「スタイルを記述する」という大まかな流れで利用できるようになります。 慣れれば5分も掛からないうちに利用できるようになるので、とっても簡単です。
それではまずグーグルフォントの導入の手順から紹介していきます。

フォントを選ぶ

まずはGoogle Fontsにアクセスします。
アクセスしたらフォントを選びます。
使用したいフォントがある程度決まっているなら、回りにあるチェックボタンやパラメータなどで絞り込むと便利です。 それぞれに番号をふったので順番に絞り込みの機能を説明していきますね。

【1】Search

Searchの部分にフォント名を入力すると、指定のフォントが【5】の部分に表示されます

【2】Categories

Categoriesの各チェックボックスを選択すると、下記のようなフォントが【5】の部分に表示されます。
・Serif …… セリフのあるフォント
・Sans Serif …… セリフのないフォント
・Display …… 見出しなど大きく表示する用のディスプレイフォント
・Handwriting …… 手書き、筆跡系のフォント
・Monospace …… 等幅フォント

【3】Sorting

【5】の部分に表示する順番などが選べます
・Trending ……. トレンド(流行のフォント順) ・Popular …… ポピュラー(人気のあるフォント順) ・Date Added …… 追加された日付順 ・Alphabetical …… アルファベット順

【3】Languages

英語・アラビア語などの言語が選べます。
ここには日本語はありません。

【4】Number of styles

対象のフォントに含まれているスタイルの数から絞り込みます

【4】Thickness

フォントの厚さから絞り込みます。
「細い ←→ 太い」となります。

【4】Slant

フォントの斜体具合から絞り込みます。
「傾きなし ←→ 斜体」となります。

【4】Width

フォントの幅から絞り込みます。
「狭い ←→ 広い」となります。

上記の設定を色々調整しても一番右下にある「CLEAR FILTERS」をクリックするとデフォルトに戻すことができます。 ただ「CLEAR FILTERS」は設定を変更していない状態では、表示されていません。

フォントの選択

使用したいフォントが決まったら、フォント名の部分をクリックします。 そうするとフォントの詳細画面へ移動します。

フォント詳細画面ではstyles(2の部分)でフォントの各スタイルが確認できます。 また「Type here to preview text」の部分に文字を入力して、サイズを変更する事で、表示サンプルが見れます。
これでよければ1のボタンをクリック。

選択したフォントが登録され、画面左下から選択できるボタンが現れるのでクリック。

「CUSTOMIZE」をクリックしてフォントの詳細設定を行います

「1」の部分で使用したいフォントのスタイルを選択します。 複数選択するとその分読み込む時間が掛かるようになるので、必要最低限のものだけ選択しましょう。
ちなみに右上にあるload timeは読み込み速度の目安となっています。 「Fast」→「Moderate」→「Slow」の順で通信速度が遅くなるので、気を付けましょう。
フォントのスタイルを選択したら2の「EMBED」をクリックして元の画面に戻ります。

CSSの呼び出し

これで一通りの設定は完了です。 あとは1の部分(STANDARD)をHTMLファイルの~内に記述します。

●html [link href=”https://fonts.googleapis.com/css?family=Arsenal” rel=”stylesheet”]

そして2の部分を使いたい要素(pやh1など)に対し、スタイルシートで指定すると選択したグーグルフォントが使えるようになります。 (詳しくはこのあと説明)

ワードプレスでグーグルフォントを使いたい場合

ワードプレスでグーグルフォントを使用したい場合、テーマにCSSを呼び出す方法は「Standard(htmlで呼び出し)」「@import(cssで呼び出し)」「JavaScript(JavaScriptで呼び出し)」の3パターンあります。 どれでも好きな方法で大丈夫ですが、通常であれば「Standard(htmlで呼び出し)」か「@import(cssで呼び出し)」で呼び出すと思うので、そちらを紹介します。

Standard

Standardで呼び出す場合は、header.phpの~内に上記画像の1の部分(STANDARD)にあるコードを記述します。
●html
[link href=”https://fonts.googleapis.com/css?family=Arsenal” rel=”stylesheet”]

@import

CSSインポートで呼び出す場合は、1の部分(@import)をクリックし、2の部分のコードを下記のようにstyle.cssの先頭に記述します。 この方法であれば、テンプレートを変更することなくグーグルフォントを使用できます。

 

CSSにスタイルを記述

 

 

 

あとはグーグルフォントを使用したい部分に対して、上記のfont-familyを指定してあげます。 例えばdivタグに対してグーグルフォントを使用したい場合であれば下記のように記述します。

装飾

グーグルフォントは、画像と違ってWEBフォントなので装飾も自由にできます。

こんな感じで通常のテキストのように装飾することができます。 ちなみに装飾・デコレーション目的でhtmlファイルに記号などを記述することは、できるだけ避けた方が無難です。 例えば装飾目的での連続した記号などは、あくまでも飾りなので、出来る限りCSSで表現しなければなりません。 もちろん内容と関係ない装飾・デコレーション目的のテキストも同じです。
例えばテキストの前に装飾目的の記号などを挿入したい場合は:before疑似要素、後なら:afterなどを指定します。 そしてcontentプロパティを併せて設定し、表示したい記号やテキストなどを記述し挿入します。 そうする事でSEOに悪影響を及ぼすことなく装飾することができます。

まとめ

グーグルフォントを使うとデザインの幅が広がります、というか画像を使う必要がなくなるのですごい便利です(^^)/ ただ日本語のフォントが少ない（確か現在9種類）っていうのがネックですが、他のフォントが無料でこれだけ揃ってれば十分すぎる気もします。
あとWordpressで使用する場合、編集しなければならない箇所が少しありますが、慣れると5分も掛からず新しいフォントを追加できるようになるので是非やってみて下さいね。