Shopifyフォント検出：ストアのテーマフォントを調べる方法

Shopifyフォント検出で本当に分かること

Shopifyフォント検出は一つのボタンではありません。管理画面を使えるか、テーマエディターを開けるか、公開ページを検証できるか、画像しか持っていないかで最適な方法が変わります。Shopifyではライブラリのフォント、システムフォント、外部サービス、テーマ内ファイルを使えるため、残る証拠も異なります。Shopify フォント検出の結果は、設定と実際の表示を分けて記録すると確認しやすくなります。

自分のストアを管理しているなら、まずテーマエディターを確認します。見出しと本文で別のファミリーを使い、セクションだけが設定を上書きすることもあります。名前だけでなく、ウェイトとスタイルも記録してください。

他のストアを調べる場合、公開HTMLとCSSから計算済みのfont-family、サイズ、ウェイト、行間、フォールバックを読めます。スクリーンショットの見た目だけを比較するより、通常は正確です。

ロゴ、バナー、商品画像、SNS画像のように文字が画像化されている場合は、画像検出が役立ちます。ただし候補を示すだけで、テーマがそのフォントを使っている証明にはなりません。字形、太さ、字間、ライセンスを確認します。

目的は検証可能な判断です。名前の出所、使用箇所、実際に読み込まれた書体、再利用できる権利を別々に確認すると、見た目が似ているだけの誤判断を避けられます。Shopify フォント検出を行うときも、この証拠の分離を守ってください。

Shopifyテーマエディターでフォントを確認する

現在のテーマでは、全体のフォント設定は通常テーマ設定にあります。名称はテーマによって異なり、セクションやブロックがより具体的なルールを持つ場合もあります。

変更前にナビゲーション、商品タイトル、本文、ボタン、価格、フッターを確認します。一つのストアでも役割ごとに別のファミリーを設定できます。

複製したテーマや下書きでテストしてください。フォントを変えると改行、カードの高さ、メニュー幅、最初の画面に見える量が変わります。スマートフォンでも確認します。

一覧にないフォントを追加する場合は、配布条件と読み込み方法を先に確認します。見えるファイルURLが、そのまま再利用許可になるわけではありません。

1. 管理画面でオンラインストア、テーマを開き、対象テーマのカスタマイズを選びます。
2. テーマ設定を開き、タイポグラフィまたはフォントを探します。
3. 見出しと本文を分けて、ファミリー、スタイル、ウェイト、サイズを記録します。
4. 商品ページとコレクションページで、セクション固有の設定がないか確認します。
5. デスクトップとモバイルで改行、ボタン、価格、必要な文字種を確認してから保存します。

公開されたShopifyストアを検証する

管理画面に入れなくても、公開ストアには確認できる情報があります。フォントの読み込みを待ち、調べたいテンプレートを開きます。トップ、商品、ブログでルールが違うことがあります。

商品タイトルなどの実際のHTML文字を選び、右クリックしてInspectを開きます。Computedでfont-family、font-size、font-weight、font-styleを検索します。

先頭のファミリーが優先ですが、グリフ不足や読み込み失敗によりフォールバックが使われることがあります。StylesではセレクターとCSSファイルを追跡できます。

見出し、段落、ボタン、価格でも繰り返し確認します。拡張機能は収集を速くしますが、FontsビューやNetworkで実際の書体を確認した方が確実です。

1. 公開URLを開き、文字とWebフォントの読み込みが終わるまで待ちます。
2. 文字ノードをInspectし、画像ではないことを確認します。
3. Computedでfont-familyの全体をコピーし、汎用フォールバックも残します。
4. ウェイト、スタイル、行間、サイズを読み、見た目の違いを説明します。
5. ブラウザーにFontsビューがあれば、選択文字に使われた書体を確認します。

実際の書体を確認する

CSSの指定は意図であり、すべての文字が同じ書体になる保証ではありません。特徴的な文字、数字、アクセント付き文字や日本語を比較し、フォールバックを別に記録します。

カスタムフォントとファイルを扱う

ShopifyテーマはWOFFやWOFF2の独自ファイルを読み込めます。@font-faceでファイル名と異なるファミリー名を付けることがあるため、ファイル名だけで判断しないでください。

NetworkパネルをFontで絞り、実際にダウンロードされたファイルを確認します。ウェイトや斜体ごとに別ファイルの場合があります。Liquidのフィルターやbase.css、theme.css、セクションのルールが全体設定を上書きすることもあります。

自分のストアでは、まず公式の設定を使います。追加する場合は、ライセンス、形式、ウェイト、スタイル、Unicode範囲、読み込みコストを記録します。

• ファミリーとファイル: @font-face、セレクター、ファイル名を照合します。名前が違うことがあります。
• ウェイトとスタイル: 400、500、600、700、斜体、可変軸を確認します。
• Unicode範囲: 必要ならアクセント、アラビア語、日本語、韓国語を実際に試します。
• 読み込みと権利: 許可された配信元を使い、通信コストを測定します。

Shopifyのフォント識別方法を選ぶ

最速の方法は手元の証拠で決まります。表で入口を選び、実際のストアで再確認してください。

信頼できるShopifyフォント確認手順

最初に証拠を分類します。テーマ設定、実際のCSS、読み込まれたファイル、画像のどれでしょうか。次に役割とページを記録し、バナーのフォントを本文のフォントと混同しないようにします。Shopify フォント検出では、この分類が結果の信頼性を決めます。

重要な判断では二つの方法で確認します。公開ストアではComputedとFontsまたはNetworkを組み合わせ、自分のストアでは設定と商品・コレクションの表示を比較します。Shopify フォント検出の候補も実際の文字で再確認してください。

最後に、識別と置き換えを分けます。元のフォントが使えない場合は、同じウェイト、サイズ、字間、行長で候補を比べ、CSSのスタックと採用した代替を引き継ぎます。

• 1. 証拠を名前付け: 設定、計算済みCSS、ファイル、画像のどれかを記録します。
• 2. 役割を分ける: 見出し、本文、ナビ、ボタン、価格、カードを別々に確認します。
• 3. 表示を検証: 特徴的な文字と実際の文を比較し、フォールバックを探します。
• 4. 本番条件を確認: 言語、権利、性能、改行、必要なウェイトを見ます。
• 5. 判断を残す: スタック、セレクター、役割、日付、代替案を保存します。

よくある失敗と限界

検出ツールは検索を短くしますが、出所と本番の確認を省けるわけではありません。

• トップだけを見る: 商品やブログは別のファミリーを使う場合があります。
• 最初のCSS名を断定する: グリフ不足や通信失敗でフォールバックになることがあります。
• ロゴをHTML文字とみなす: PNG、アウトラインSVG、canvasから元フォントは分かりません。
• ウェイトと字間を無視する: 400と700、字間の違いで印象は大きく変わります。
• 許可なくコピーする: 公開URLはファイルの再利用権を与えません。
• モバイルを見ない: デスクトップで合うフォントが小画面で改行や速度の問題を起こします。