メインコンテンツへスキップ

Google Fonts の使い方

  1. Google Fonts にアクセスし、お好みのフォントを選択します。

  2. フォントページで Get font ボタンを見つけてクリックします。

1

  1. Get embed code をクリックします。

2

  1. @import を選択します。

3

  1. ここでは、2 つの部分の内容をコピーする必要があります。

4

第一部分

たとえば、私が選択したこのフォントでは、Google が提供する埋め込みコードは次のようになっています。

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
</style>

URL 内の ? 以降の部分だけをコピーし（上図の赤線部分）、プラグイン設定ページの Google Fonts (Font families) 欄に貼り付けます。この例では、family=Noto+Sans+JP:[email protected]&display=swap をコピーすれば十分です。

第二部分

このフォントでは、Google が提供するスタイルコードは次のようになっています。

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

必要なのは、上図で赤い枠線で囲まれている部分だけです。

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

スタイル内には、値を自分で入力する必要がある場合があります。たとえばこのフォントでは、font-weight の値が <weight> になっています。これは、そこに値を入力する必要があることを意味します。このような入力が必要な箇所は、一般的に <> で囲まれています。対応する使用可能な値は Mozilla で確認できます。

この font-weight には normal を指定できます。

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;

これをプラグイン設定ページの Google Fonts (CSS properties) に貼り付けます。

  1. 設定を完了します。

5

  1. 動画ページに戻ると、フォントが適用されているのを確認できます。下図では、それぞれ Noto Sans Japanese と Noto Serif Japanese を使用しています。

6