Shopify は、ストアで使用できる何百もの無料フォントを提供しています。ただし、ブランド ガイドラインに合わせるためにカスタム フォントを使用する必要がありますが、Shopify ではサポートされていません。テーマに追加することはできます。その方法については次のガイドを参照してください。
まずフォントを利用できるようにする必要があります。一部のフォントにはライセンスがあるため、使用するために適切に購入するようにしてください。当社のサポート チームは、必要なフォントの入手を担当しません。
次に、追加するフォント スタイルごとに、 .woffと.woff2形式の 2 つのファイルを用意します。これは、追加したフォントがすべての種類のブラウザで読み取れることを確認するためです。
十分なファイルがあれば、テーマ設定のファイルフォルダーにアップロードします。
アップロードしたすべてのフォント ファイルの右側には、コピー行為のためのファイル リンクを提供するチェーン ボタンがあります。
次に、管理者ダッシュボードに戻り、 [オンライン ストア] > [テーマ]をクリックし、[Be Yours テーマ] を選択してさらに編集します。 [アクション] > [コードの編集]をクリックします。
開いた編集コード ウィンドウで、左側の列のフォルダーSnippetsに移動します。このフォルダーで、「css-variables.liquid」ファイルをクリックして、新しいフォントのカスタム コードを追加します。
ファイルを開くファイル「css-variables.liquid」で、タブ スタイルの下にコードを追加します。これはテキスト{%-style -%}の下にあります。コードは次のように追加されます。
@フォントフェイス {
フォントファミリー: " MyFontHeading ";
src: url('フォント ファイルのリンクを追加') format("woff2"),
url('フォント ファイルのリンクを追加') format("woff"); }@フォントフェイス {
フォントファミリー: " MyFontBody ";
src: url('フォント ファイルのリンクを追加') format("woff2"),
url('フォント ファイルのリンクを追加') format("woff"); }注: 斜体のテキストセクションはユーザーがカスタマイズします。追加する @font-face{ } コードの数は、使用しているフォント スタイルの数によって異なります。
- その後、「font-body-family」というテキストを検索して関連するコード行に移動し、ステップ 6 のコード内で {{...}} のすべての部分を font-family に追加したテキストに置き換えます。たとえば、「MyFontHeading」です)。同様に、テキスト「font-Heading-family」を検索し、{{...}} のすべての部分を、font-family 行に追加したテキスト (この例では「MyFontBody」) に置き換えます。
- 交換後は下の写真のようになります。
- 最後に、 「保存」をクリックします。
注記：
- これらのコードを「css-variables.liquid」ファイルに追加すると、ここで何を構成しても、テーマ設定>タイポグラフィの設定は無効になります。
- 上記のすべての手順は、すべてのセクションとブロックに同じカスタム フォントを適用する場合に適用されます。さまざまなセクションやブロックにさまざまなフォントを適用する必要がある場合、編集プロセスはさらに複雑になるため、サポート チームにお問い合わせください。
この記事がお役に立てば幸いです。この機能についてご不明な点がございましたら、サポートが必要なため、お気軽に弊社チームまでお問い合わせください。
"