📖
【Shopify基礎構築②】 Googleフォントを使用する
この記事では、ShopifyでGoogleフォントを使用する方法についてまとめます。
Googleフォントについて
Googleフォントは、Google が提供しているWebフォントで、無料で利用できます。様々な言語のフォントにも対応している点が大きな特徴です。
Noto Sans JapaneseはGoogle と Adobe が共同開発したフォントで、Google Fonts の中でも特に人気が高いです。
今回は、このNoto Sans Japaneseを使用したいと思います。
Googleフォントのコードについて
こちらのサイトで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