Google Fontsの使い方を初心者向けに解説!

マークアップ

「フォントって、いろいろあってよくわからない」

「端末によって表示が変わるのをなんとかしたい」

そんなあなたにオススメしたいのが、Google Fontsです。

この記事では「Google Fontsって何?」という方のために、基本的な使い方をご紹介します。これを読んで、オシャレなフォントを使い倒してください!

Google Fontsとは?

Google Fonts
Making the web more beautiful, fast, and open through great typography

Google Fontsとは、商用利用も可能なwebフォントを無料で提供するサービスです。

2018年9月からは日本語フォントも正式サポートされたので、日本のユーザーにとってより使いやすいものになりました。ただし、日本語フォントは英語フォントに比べて重いので、ご注意を!

webフォント

webフォントとは、サーバーからフォントデータを読み込んでwebサイトに表示させる仕組みのことです。

Google Fontsは、検索エンジン世界シェア1位であるGoogleのサーバーからデータを読み込むので、世界中で利用されています。

通常のフォントの場合、閲覧する端末にインストールされているものしか表示できません。
WindowsかMacか、iPhoneかAndroidかによって標準のフォントが異なるため、統一したスタイルを指定することが難しかったのです。

一方、webフォントはサーバーからデータを読み込むので、端末に関係なく同じフォントを表示させることができます。

使い方は次の4ステップ

Google Fontsはユーザー登録不要!次の4ステップで簡単に利用できます。

  1. 使いたいフォントを選ぶ
  2. スタイルを設定する
  3. HTMLのhead内にlinkを貼る
  4. CSSでfont-familyを指定

使いたいフォントを選ぶ

まずはGoogle Fontsのページに行きましょう。

利用できるフォントが一覧で表示されます。この中から使いたいものを選びましょう。

使いたいフォントがあったら、右上の「+」をクリックします。

すると、画面下のリスト(Family Selected)に追加されます。

スタイルを設定する

追加が済んだら、リストの黒いバーの右側にある「-」をクリックしましょう。ちなみに2つ以上のフォントを選択すると、リストが「Families Selected」と複数形になります。

追加したフォントの設定ウインドウが開きます。

ウインドウの上部には、追加したフォントが一覧で表示されます。フォント名の右にある「-」をクリックすると、そのフォントを削除することができます。

その下にある「CUSTOMIZE」タブをクリックすると、スタイルの設定画面。太字や斜体を使うか選択できます。スタイルを設定するほど重くなるので、必要なものだけチェックしましょう。

下にスクロールすると、Languagesを選択できます。日本語フォントを使用する場合は、「Japanese」にチェックしましょう。

HTMLのhead内にlinkを貼る

スタイルを設定し終えたら、「EMBED」タブをクリックします。

上段にあるlinkタグをコピーして、HTMLファイルのheadタグ内に貼り付けます。

<head>
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>

これでGoogle Fontsを読み込むことができるようになりました。

CSSでfont-familyを指定

あとは「EMBED」下段のコードを、CSSファイルのフォントを適用したいセレクタに貼り付けます。

例
p {
  font-family: 'Noto Sans JP', sans-serif;
}

これでフォントが適用されました!

slotファイルの場合

ちなみに、slotファイルにもGoogle Fontsを使用しています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SLOT</title>
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header>
      <h1>SLOT</h1>
    </header>

    <div class="wrapper">
      <p id="slot-number"></p>
    
      <p id="slot-number-two"></p>
    
      <p id="slot-number-three"></p>
    
      <button id='slot-start' onclick='startSlot()'>START</button>
      <button id='slot-stop' onclick='stopSlot()'>STOP</button>
    
      <button id='slot-start-two' onclick='startSlotTwo()'>START</button>
      <button id='slot-stop-two' onclick='stopSlotTwo()'>STOP</button>
      
      <button id='slot-start-three' onclick='startSlotThree()'>START</button>
      <button id='slot-stop-three' onclick='stopSlotThree()'>STOP</button>
    </div>
    <script src="slot.js"></script>
  </body>
</html>
* {
  margin: 0;
  padding: 0;
  background: radial-gradient(#05FBFF, #1E00FF);
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  text-align: center;
  line-height: 80px;
  z-index: 1;
}

h1 {
  font-size: 50px;
  color: #000;
  text-shadow: 1px 1px 0 #fff,
               -1px 1px 0 #fff,
               1px -1px 0 #fff,
               -1px -1px 0 #fff;
}

.wrapper {
  position: relative;
}

p {
  display: inline-block;
  height: 600px;
  width: 33%;
  text-align: center;
  font-size: 300px;
  font-family: 'Press Start 2P', cursive;
  line-height: 600px;
  float: left;
}

button {
  display: inline-block;
  height: 50px;
  width: 100px;
  font-size: 20px;
  box-shadow: 4px 4px;
  border-radius: 4px;
  margin-left: 120px;
}

button:hover {
  opacity: 0.7;
}

button:active {
  transform: translateY(4px);
  border-bottom: none;
}

HTMLファイルのhead内でGoogle Fontsを読み込み。

  <head>
    <!-- 省略 -->
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
    <!-- 省略 -->
  </head>

そしてCSSファイルに「font-family」を指定。

p {
  /* 省略 */
  font-family: 'Press Start 2P', cursive;
  /* 省略 */
}

数字の部分がfont-familyを指定したところです。

Image from Gyazo

まとめ

ユーザー登録不要ですぐに使えるGoogle Fontsは、マークアップの強い味方です。

これを使ってあなたのwebサイトをオシャレでユニークにしましょう!

ただし、ユーザーの使いやすさも忘れないで!

コメント

タイトルとURLをコピーしました