見出し画像

shopifyで日本語フォントを使う方法

Shogo Miyauchi

2020.11.17現在。shopifyのデフォルトには日本語フォントがありません。なので？たまにshopifyを使用しているサイトで英文フォントのまま日本語を使用しているところをみかけます。

そこで、日本語フォントの設定を下記に記載します！

1. テーマ編集画面へ

管理画面から「オンラインストア」 -> 「テーマ」 -> 「アクション」 -> 「コードを編集」を選択する事で、コード編集画面を表示できます。

2. 「theme.liquid」の<head> 〜 </head>内に呼び出すフォントのリンクを設定

画像1

「Layout」フォルダを選択 -> 「theme.liquid」を選択。

コード内の<head> 〜 </head>内に呼び出すフォントのリンクを設定します。今回は、Google Fontsを設定。

<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
<head>
 <meta charset="utf-8">
 
 〜〜省略〜〜
 <!-- Google Fonts -->
 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
 <!-- -->
 
 </head>

コードを追加したら「保存」

3. 「theme.scsss.liquid」のfont-familyを変更

画像2

「Assets」フォルダ -> 「theme.scss.liquid」を選択

コード内の以下のフォントを変更。

(530行目)
$font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
---> 以下に変更
$font-stack-header: “Noto Sans JP”, sans-serif;

 
 
(534行目)
$font-stack-body: {{ base_font.family }}, {{ base_font.fallback_families }};
---> 以下に変更
$font-stack-body: “Noto Sans JP”, sans-serif;
 
  
(534行目)
$font-stack-body: {{ base_font.family }}, {{ base_font.fallback_families }};
---> 以下に変更
$font-stack-body: “Noto Sans JP”, sans-serif;

行は、デフォルト設定の場合の行数ですので対象の箇所が見つからない場合にはコード編集画面で変更する箇所の文字を「検索」してみてください。

コードを変更したら「保存」

これで、ひとまずの設定は完了となります。

元に戻すときは、変更した箇所(theme.scss.liquid)のfont-familyをデフォルトに書き換えてください。

この記事が気に入ったらサポートをしてみませんか？