GoogleフォントをWebデザインに。設定方法や見出しに使えるオススメフォントのご紹介 Bruno[ブルーノ]

GoogleフォントをWebデザインに。設定方法や見出しに使えるオススメフォントのご紹介

  • #Web素材 / ツール
  • #CSS
  • #HTML
  • #Webフォント
  • #Web制作
  • #インスピレーション

Googleフォントにて見た目の良いフォントを利用できるのは知っておりましたが、デザインに合うものを探すが大変であったり、表示が遅かったりで、使用する機会はありませんでした。

しかし、先日サイトを閲覧してみましたら、見やすくリニューアルされているし、表示遅れも少なくてとても良いサービスに変わっていたのです。

これから積極的にGoogleフォントを利用していきたいと思いましたので、今回Webデザインとして設定する方法をメモしておきます。オススメのGoogleフォントのご紹介もありますので、ぜひ参考にしてみてください。

Googleフォントの設定方法

Googleフォントの設定はとても簡単になりました。好みのフォントを探しやすくなっているし、HTMLとCSSのファイルにそれぞれ1行ずつ記述するだけで設定できます。

デザインに合うGoogleフォントを探しだす

Googleフォントには、現在808スタイルのフォントがあります(2016/09現在)。
その中から求めるフォントを探しだすのはなかなか難しいと思うかもしれませんが、『Serif』や『Sans Serif』などカテゴリ毎に表示させたり、人気順などにソートしたりすることができるので、比較的カンタンに見つけられるようになりました。

googlefont01

サイトの右側にある『Category』や『Sorting』から好みのフォントをソートします。

googlefont02

デザインに合うフォントを見つけましたら、プラス(+)ボタンをクリックするとそのフォントをストックすることができます。また、複数選択することも可能です。他にも使用したいフォントがありましたら、同様にプラス(+)ボタンをクリックしていきます。

「やはり使用しない。」と思ったら、選択済みのフォントのマイナス(-)ボタンをクリックすれば選択解除もできます。

タグやコードを取得し、ファイルに記述する

googlefont03

フォントを選びましたら、画面右下にあるハイフン(-)ボタンをクリックすれば、上のような表示になります。その中に記載されているHTMLタグとCSSコードをそれぞれ該当のファイルに記述していきます。ここでは、『Roboto』というフォントを選択してあります。

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
font-family: 'Roboto', sans-serif;

WordPressの場合、HTMLはheader.php</head>の前などに記述しておけば、全てのページにて利用できます(テンプレートにもよります)。CSSはstyle.css内の使用したいコード(見出しの場合、h2やh3など)に記述してください。

これで設定完了です。

オススメのGoogleフォントご紹介

見出しや見出しのアクセントとして利用したいフォントを7つご紹介します。そのまま設定できるようにタグやコードもご案内しておりますので、気に入ったフォントがございましたら、そのまま設定してみてください。

The man who has no imagination has no wings.

Raleway

細身のフォントは女性をターゲットとしてサイトデザインにピッタリ。

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
font-family: 'Raleway', sans-serif;

The man who has no imagination has no wings.

Bree Serif

フォントサイズを大きめに設定してインパクトを強くするために使用したいフォント。

<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
font-family: 'Bree Serif', sans-serif;

The man who has no imagination has no wings.

Kurale

丸みのあるフォントで女性的。こちらも大きめのフォントサイズで表示させたい。

<link href="https://fonts.googleapis.com/css?family=Kurale" rel="stylesheet">
font-family: 'Kurale', serif;

The man who has no imagination has no wings.

Kaushan Script

太字のサインペンで手書きしたようなフォント。画像に重ねて表示させると印象的になりそう。

<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
font-family: 'Kaushan Script', cursive;

The man who has no imagination has no wings.

Yellowtail

こちらは中字のサインペンかな。見出しのアクセントに使いたい。

<link href="https://fonts.googleapis.com/css?family=Yellowtail" rel="stylesheet">
font-family: 'Yellowtail', cursive;

The man who has no imagination has no wings.

Snippet

クセのあるフォントではあるけど、ポイントで使用するととても効果的に表現できそう。

<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
font-family: 'Snippet', sans-serif;

The man who has no imagination has no wings.

Tangerine

こちらもクセがあるけど、女性がターゲットのサイトに活躍しそうなフォント。

<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
font-family: 'Tangerine', cursive;

意外にも簡単に設定できるGoogleフォントにビックリしました。最近リニューアルされたのかな。かなりいいサービスになってるので、これからこのサイトで積極的に利用してみてクライアントに使用できるか確認していきたいと思います。