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