📖

ShopifyでGoogleフォントを使用する

2023/01/11に公開約1,800字

この記事では、ShopifyでGoogleフォントを使用する方法についてまとめます。

Googleフォントについて

Googleフォントは、Google が提供しているWebフォントで、無料で利用できます。様々な言語のフォントにも対応している点が大きな特徴です。

Noto Sans JapaneseはGoogle と Adobe が共同開発したフォントで、Google Fonts の中でも特に人気が高いです。
今回は、このNoto Sans Japaneseを使用したいと思います。

Googleフォントのコードについて

https://fonts.google.com/
こちらのサイトでNoto Sans Japaneseと検索します。


フォントの文字の太さ(font-weight)を選択できるように、
Thin 100からBlack 900まで選択していきます。

選択すると、右にコードが出てきます。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

これらのコードを<head>タグ内に記述していきます。

Shopifyへの記述について

上記のコードをShopifyに記述していきます。
記述箇所は、レイアウト(Layout)フォルダのtheme.liquidファイルとなります。
こちらの<head>タグ内の任意の箇所に先ほどのコードを貼り付けます。

フォント設定について

続いて、同じル<head>タグ内の{% style %}タグにあるbodyのstyleを編集します。
デフォルトでは、下のようなコードになっています。

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100%;
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

このfont-familyを'"Noto Sans JP", sans-serif'にすれば完了です。

  font-family: 'Noto Sans JP', sans-serif;

sans-serifは、'Noto Sans JP'が反映されない場合に適用されるフォントとなります。

終わり

以上で終了となります。
今後もアウトプットをしていきますので、少しでも参考にしていただければ幸いです。

Discussion

ログインするとコメントできます