【STEP6】Google Fontsでお洒落な英字を使えるようにする

Google Fontsとは

今回は「Google Fonts」というフォントサービスを使い、自分の好きなデザインのフォントをwebページで使用する方法を学んだ。

無料でこれほどの数の英字のフォントが使える方法があると知らなかったので、とても驚いた。この先どんどんと活用していきたい。

ちなみに「Google Fonts」は以下からアクセスすることができる。

fonts.google.com

Google Fontsの使い方

まずは「Google Fonts」にアクセスする。自分の好きなフォントを探す。

気に入ったフォントの上にカーソルをもっていくと、項目がいくつか現れる。一番左の「sentence」となっている部分をクリックする。

f:id:eno1081:20170226122752p:plain

ここから実際に使用したときのフォント表示を見ることができる。例えば、一番下の「custom」を使えば、自分の好きな文字を入力することができる。

f:id:eno1081:20170226123212p:plain

大きさや太さなどを変えて、幾らでもシュミレーションができる。

検索するときは、横のsearch機能をうまく使うといい。

  • Serif(セリフ、明朝系のフォント)
  • Sans-serif(サンセリフ、ゴシック系のフォント)
  • Display(装飾的なフォント)
  • Handwriting(筆記体)

というカテゴリーにチェックを入れたり、外したりすると検索しやすい。

フォントを選択したら【EMBED】➡【@import 】のタブを選択し、真下に表示される@importの設定をコピーし、スタイルシートの冒頭に貼り付ける。

f:id:eno1081:20170226123917p:plain

これだけでは表示が変わらないので、フォントを変えたい項目に、一番下のSpecify in CSSと書いてある部分のコードを貼り付ける。

これだけで自分の好きなフォントをwebページで使用できる。ただしGoogle Fontsで利用できるのは、英字のみである(日本語のフォントは基本的に有料サイトからフォントを購入することになるらしい)。

まとめ

Google Fonts」のサービスを利用することで、無料で好きなフォントを英字ならば使用することができる。

利用するときは【@import】を選び、最初に表示されるコードをスタイルシートの最初に貼り付ける。そのあと、フォントを利用したい項目に「font-family」から始まっているCSSの記述を貼り付ける。

このテクニックを知っているだけで、デザインの幅が大きく広がるように感じた。自分でデザインを行うまで、まだまだ遠い道のりだが、何とも覚えておきたい。

ここまでで以下のテキストの第二章が終了した。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

今まで何も知らないまま、必死にはてなブログのコードを見つめ、自力でカスタマイズを行っていたが、初めからこの本を購入し、勉強すればよかった。

ネットの情報は無料で、効率の良いように思うときもあるが、一冊の本に1000円ほどのお金を支払うだけで、これだけの知識を得ることができるとすれば、安いものだと思う。ここまで、非常に楽しい。

次は第3章に進み、画像の扱い方を学んでいく。