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