初心者でも５分でできる！Google Fontsの使い方

Google Fontsとは、ダウンロードしてローカルで使うことも、WEBフォントとして使うことができる非常に便利なツールです。
なんと無料で商用利用も可能です。タイポグラフィデザインがトレンドなこともあり、多くのWEBサイトに用いられています。

ダウンロードも簡単２ステップ、WEBフォントとしての導入もたった数行のコードで簡単にできる、Google Fontsの使い方をご紹介します！

Google Fontsの使用に関するFAQページはこちら

developers.google.com

よくある質問 | Google Fonts | Google for Developers

Google Fontsの使い方

https://fonts.google.com/ で気になるフォントを探します。

入手したいフォントがあれば、「Get Font」ボタンを押します。
一度に複数のフォントを入手することも可能です。

右上のカートボタン（手提げバッグのようなアイコン）から、「Download all」ボタンを押すだけ！
複数フォントをダウンロードする時はzipファイルに圧縮されてダウンロードされます。

あとはパソコン内にインストールするだけで完了です！簡単！

https://fonts.google.com/ で気になるフォントを探します。

入手したいフォントがあれば、「Get Font」ボタンを押します。
一度に複数のフォントを入手することも可能です。

「Get embed code」ボタンを押すと、コピペ用のソースが表示されます。
HTMLに<link rel=”〜”>を記載する形式か、CSSに「@import〜」で記載する２つの方法を選べます。

どちらを選んでも手間的にはあまり変わりませんが、common.cssなどサイトの共通パーツで使用する場合はCSSに@importした方がいいかも。

@importantを選択したら、<style>ごと<head>内へペーストするか、<style>を抜いて@importantの所だけCSSファイルにペーストすることで作動します。

後は、CSS class for a variable style内のCSSをペーストすればOKです。
このように、必要な箇所（font-famiry、font-weight、font-style辺り）だけを持ってきて、すでにあるクラスの中にペーストしてもすぐに使えます。

.title{
  font-size: 25px;
  text-align: center;

  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

利用に関するFAQはGoogle公式にてまとめられていますが、そのほかにも以下の点に注意です。