Googleフォントを利用して、超簡単にWEBフォントを使おう!


かっこいいフォントを使おう!WEBフォントって何?

次の英文を見てごらん。

Welcome to our website.

この英文、画像で作ったわけじゃないんです。
今までだったら、こんな感じの滑らかで特徴的なテキストは画像じゃないと表現できませんでした。
でもこれ、ふつうのHTMLテキストなんです。

画像の時は、テキストの文言を変更したり、色を変更するのにも、
わざわざペイントソフトを立ち上げて、切り取って、保存して・・・って非常に面倒でしたが、
ふつうのHTMLテキストなので、テキストを変更するは簡単。
メモ帳でテキストを変更するだけですみます。
HTMLなので、フォントのサイズや色もCSSを使えばあっという間です。

単なるテキストなので、文言を変えるなんて余裕!

Yes, we can!

単なるテキストなので、もちろん色を変えることだって簡単。

Change the color

これが、WEBフォントです。
参考:ダサいフォントはもう卒業!WEBフォントでクールな文字を表現しよう!

Googleフォントを使って、簡単にWEBフォントを使ってみよう!

こんな便利なWEBフォント、使い方はいくつかありますが、
もっとも簡単なのがGoogleから提供されているWEBフォントかもしれません。
Googleが用意したタグを使って、指示に従うだけで簡単に設置できます。
とりあえず、初めての人はこの簡単な使い方を試してみましょう。
※残念ながらGoogleフォントは欧文中心です。
 WEBページのアクセントとして使用するにはちょうどいいかもしれませんね。

1.好きなフォントを選ぶ

まずは、Googleフォントのサイトに行きましょう。

Googleフォント

たくさんの欧文フォントが並んでいます。
和文が無いのが残念・・・・。
たくさんあるフォントの中から、プレビューを見ながら好きなフォントを選びましょう。
使いたいフォントの下部分にあるボタンをクリックしてください。

フォント

2.フォントを設置する

現時点では英語ですが、
そのまま「3. Add this code to your website:」という項目に進んでください。
そこに書かれているタグをそのまま、内に書き込みましょう。
これで、フォントをGoogleから読み込ませることができます。

Google Fonts

次に、実際に適用したいタグにスタイルを指定します。
CSSファイルを使って読み込ませてもかまいませんし、タグに直接インラインで記述してもかまいません。
とにかく、普通のCSSのfont-familyと同じ使い方です。

font-family

要は、Googleからフォントデータを読み込ませて、font-familyで指定するだけです。
今回はGoogleの提供するフォントを使用しましたが、フォントデータさえ読み込ませることができたら、
あとは、font-familyで名前を指定して設定するだけ。

今まではWEB特有のダサいフォントしか使えなかったのが、
WEBフォントを使えば、こんな簡単に格好いいテキストに変わります。

見出しなどにうまく使うと、サイトがもっと格好よくなりそうですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です