Concept テーマにカスタムフォントを追加する

Shopify は、ストアで使用できる何百もの無料フォントを提供しています。ただし、ブランドガイドラインに合わせるためにカスタムフォントを使用する必要がありますが、Shopify ではサポートされていません。テーマに追加することはできます。

フォントカスタム前	フォントカスタム後

以下の 2 つの方法のいずれかを使用して、コンセプトテーマのフォントをカスタマイズできます。

Liquid コードを編集する(強く推奨)
これを達成するための 9 ステップのガイドは次のとおりです。
1. まずフォントを利用できるようにする必要があります。一部のフォントにはライセンスがあるため、使用するために適切に購入するようにしてください。当社のサポートチームは、必要なフォントの入手を担当しません。
2. 次に、追加するフォントスタイルごとに、 .woffと.woff2形式の 2 つのファイルを用意します。これは、追加したフォントがすべての種類のブラウザで読み取れることを確認するためです。
3. 十分なファイルがあれば、 [管理者ダッシュボード] > [コンテンツ] ¹ > [ファイル] ² > [アップロード] ³からアップロードします。
  アップロードしたすべてのフォントファイルの右側には、コピー行為のためのファイルリンクを提供するチェーンボタンがあります。
4. 次に、管理者ダッシュボードに戻り、 [オンラインストア] ¹ > [テーマ] ²をクリックし、コンセプトテーマを選択し、 [アクション] ³ > [コードの編集] ⁴をクリックします。
5. 開いた編集コードウィンドウで、左側の列のフォルダー[Snippets] ¹に移動します。このフォルダーで、ファイル[css-variables.liquid] ²をクリックして、新しいフォントのカスタムコードを追加します。
6. ファイルを開くファイル「css-variables.liquid」で、タブスタイルの下にコードを追加します。これはテキスト{%-style -%}の下にあります。コードは次のように追加されます。
  
  @フォントフェイス {
  フォントファミリー: "MyFontHeading";
  src: url('フォントファイルのリンクを追加') format("woff2"),
  url('フォントファイルのリンクを追加') format("woff"); }
  
  @フォントフェイス {
  フォントファミリー: " MyFontBody";
  src: url('フォントファイルのリンクを追加') format("woff2"),
  url('フォントファイルのリンクを追加') format("woff"); }
  注:斜体のテキストセクションはユーザーがカスタマイズします。追加する @font-face{ } コードの数は、使用しているフォントスタイルの数によって異なります。
7. その後、次のことを行います。
  - テキスト「font-Heading-family」を検索し、{{...}} のすべての部分を、font-family 行に追加したテキスト (この例では「MyFontBody」) に置き換えます。
  - テキスト「font-body-family」を検索して関連するコード行に移動し、{{...}} のすべての部分をステップ 6 のコード内の font-family に追加したテキストに置き換えます(この例では、 'MyFontHeading')
8. 交換後は下の写真のようになります。
9. 注記：
  - これらのコードを「css-variables.liquid」ファイルに追加すると、ここで何を構成しても、テーマ設定>タイポグラフィの設定は無効になります。
  - 上記のすべての手順は、すべてのセクションとブロックに同じカスタムフォントを適用する場合に適用されます。さまざまなセクションやブロックにさまざまなフォントを適用する必要がある場合、編集プロセスはさらに複雑になるため、サポートチームにお問い合わせください。
RoarThemeアプリの使用
Shopify は膨大な無料フォントのコレクションを提供していますが、ブランドのガイドラインに合わせるためにカスタムフォントが必要になる場合があります。希望のフォントが Shopify でネイティブにサポートされていない場合でも、心配する必要はありません。私たちのチームは、Web デザインを強化するための幅広いフォントのカスタマイズオプションを提供するアプリを開発しました。私たちのアプリで可能性を発見し、店舗の美観を高めてください。