特定の箇所にGoogle fontsを反映させたい

[Kite]

お世話になっております。

shopify partnerのkiteと申します。

現在、テーマ「Focal」にてサイト構築中です。

今回フォントについてご相談させてください。

ベージ全体にアプリ「Fontify」を使用してフォントを指定しています。

TOPページの一部リッチテキスト部分だけ、別のフォント（Shippori Mincho）を使用したく下記の方法で進めているのですがうまく反映されません。同時に行間の調整も希望です。

色んな方法を試しているのですが未だ解決に至らず、ご教示いただけますと幸いです。。

1.　theme. liquidに以下追記。

2.　新しいアセット「custom-font.css」を追加

3.　custom-font.cssに以下追記。

[ogasawarakyohei]

Kiteさん、はじめまして。

Tsunの小笠原と申します。

記載の情報を元にテストしてみましたが、Shippori Minchoのフォントが該当箇所に反映されました。

ですので、記述や指定方法に問題がなければ正常に動作しそうです。

下記を確認してみてください。

• theme.liquidへのlinkタグの挿入位置 (headタグ内に入っているか)
• 作成したcustom-font.cssの名前を間違えていないか
• custom-font.css内のクラス名が間違っていないか (その他のクラスのfont-familyを指定して変更されるかどうかも確認してみてください)

上記が問題ないようでしたら、Fontifyアプリが悪さしている可能性があります。

問題の切り分けのため、Fontifyアプリを無効にしてみてフォントがあたるか確認してみてください。

また、お使いのブラウザの開発ツール等を使うとどのようにfontがあたっているか確認できます。

[Kite]

Tsun 小笠原さま

ご返信いただき誠にありがとうございます！

あげていただいた項目を再度見直しましたが特に問題はなく、Fontifyアプリを無効にすると指定箇所にフォント（Shippori Mincho）が反映されました！

ただベースを変更したいので他に方法がないか悩んでおります。

アプリから該当箇所のpタグ、h3のみ無効にしてもうまく反映されませんでした、、

もし思い当たる解決法がございましたらご教示いただけますと幸いです。

重ね重ね申し訳ありません。

[ogasawarakyohei]

Kiteさん

Fontify アプリを確認したところ、任意のタグにfont-familyのスタイルをあててくれるアプリのようですね。

Fontify アプリ側では属性セレクタで指定されているようなので、属性セレクタよりCSSの優先度が高い指定をすれば、任意のフォントにできると思います。

たとえば、任意の箇所に style="font-family: 'Shippori Mincho';"  の指定をすると変更されませんでしょうか？

[Kitatema]

Tsun 小笠原さま

CSSの優先順位について調べました！アドバイスありがとうございます。

Shopifyですと今回style="font-family: 'Shippori Mincho';" をどこに記載するのが 良いのでしょうか。。

知識が少なく申し訳ありません。

[ogasawarakyohei · Accepted solution]

Kitatemasさん

> Shopifyですと今回style="font-family: 'Shippori Mincho';" をどこに記載するのが 良いのでしょうか。。

Shippori Michoフォントにしたい箇所が記載されているLiquidファイルを探して、タグ内に指定していただければ変更されると思います。

例えば、header.liquid内の

<h1 class="header__heading">Header</h1>

という箇所のみShippori Michoフォントにしたいのであれば、

<h1 class="header__heading" style="font-family: 'Shippori Mincho';">Header</h1>

と変更します。

[Kitatema]

、、、、、、、、、、、、、

[Kite]

Tsun 小笠原さま

ご教示いただいた内容で思い通りのフォントを反映することができました！！

何度も質問させていただきましたが、ご親切にご対応いただきありがとうございました。