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

更新：2023/03/10
#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など）に記述してください。

これで設定完了です。