📁

【Shopify.dev和訳】Themes/Architecture/Settings/Fonts

2021/09/18に公開

Shopify

themes

tech

この記事について

この記事は、Themes/Architecture/Settings/Fontsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

Fonts

テーマにフォントを追加するには、以下の方法があります。

Shopify のフォントライブラリからフォントを使用する
Typekit やその他のサードパーティソリューションのようなカスタムフォントを使用する

Shopify font library

Shopify のフォントライブラリは、システムフォント、Google フォントのセレクション、Monotype 社のライセンスフォントを含むフォントのコレクションです。これらのフォントは、Shopify のすべてのオンラインストアで無料で使用でき、WOFF と WOFF2 の両方のフォーマットで提供されています。

各フォントのファイルには、そのフォントで Unicode レンジが利用可能な場合、以下のレンジが含まれています。

このように、幅広い用途に対応したフォントが揃っています。しかし、ライセンスの制限により、Shopify が含めることができないフォントもあります。より幅広い文字を使用する必要がある場合は、システムフォントや Typekit、その他のソリューションをご利用ください。

Shopify のフォントライブラリの使用についての詳細は、「Shopify のフォントをテーマに追加する」を参照してください。

System fonts

システムフォントとは、ユーザーのコンピュータにすでにインストールされているフォントのことです。これにより、ブラウザがテキストをレンダリングする前にフォントをダウンロードする必要がなくなり、テーマのパフォーマンスが向上します。システムフォントは、利用可能なフォントと一緒に表示され、system バッジで示され、テーマエディタのフォントピッカーの「システムフォント」カテゴリに表示されます。

システムフォントを使用する場合、テキストのレンダリングに使用されるフォントはユーザーのオペレーティングシステムによって異なりますが、3 種類のシステムフォントがあります。以下は、これらの種類のフォントの例です。

mono - Menlo, Consolas, Monaco, Liberation Mono, and Lucida Console
sans-serif - Menlo, Consolas, Monaco, Liberation Mono, or Lucida ConsoleBlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, and Helvetica Neue
serif - Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, and Source Serif Pro

Shopify フォントをテーマに追加する

Shopify のフォントライブラリのフォントをテーマで使用する方法を以下に概説します。

font_picker タイプの設定を追加して、マーチャントがテーマエディタでフォントを選択できるようにします。この設定の値は、font オブジェクトとして返されます。
以下のfont フィルターのいずれかを使用して、選択したフォント、またはそのバリエーションを読み込みます。
- font_face フィルターを使って、デフォルトの @font-face 宣言を挿入します。
- font_url フィルターを使って、CDN の URL にアクセスし、カスタムの @font-face 宣言を作成します。
- font_modify フィルターを使うと、同じファミリーのフォントのバリエーションにアクセスできます。たとえば、ボールドやイタリックなどのスタイルです。
選択したフォントを参照して、font-family、font-weight、font-style などの特定の CSS スタイリングを設定します。

利用可能なフォント

次のフォントは、すべての Shopify オンラインストアで無料で使用できます。

Shopify アプリのご紹介

Discussion

ログインするとコメントできます