FROM CACHE - jp_header
解決済

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

Kite
Shopify Partner
9 0 1

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

shopify partnerのkiteと申します。

 

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

 

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

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

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

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

 

1. theme. liquidに以下追記。

スクリーンショット 2022-12-17 0.53.02.png2. 新しいアセット「custom-font.css」を追加

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

スクリーンショット 2022-12-17 0.56.09.png

 

 

1 件の受理された解決策
ogasawarakyohei
Shopify Partner
109 43 39

成功

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>

と変更します。

小笠原 京平 | 株式会社Tsun | RuffRuff アプリ
・私の回答が役に立ったら、いいね! ボタンをクリックして教えてください!
Shopify 開発で役に立つ情報を発信していますので、テックブログおすすめ Shopifyアプリ もぜひご参照ください。

元の投稿で解決策を見る

7件の返信7

ogasawarakyohei
Shopify Partner
109 43 39

Kiteさん、はじめまして。

Tsunの小笠原と申します。

 

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

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

 

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

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

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

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

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

 

Screenshot 2022-12-17 at 9.27.39 AM.png

 

小笠原 京平 | 株式会社Tsun | RuffRuff アプリ
・私の回答が役に立ったら、いいね! ボタンをクリックして教えてください!
Shopify 開発で役に立つ情報を発信していますので、テックブログおすすめ Shopifyアプリ もぜひご参照ください。
Kite
Shopify Partner
9 0 1

Tsun 小笠原さま

 

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

 

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

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

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

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

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

 

ogasawarakyohei
Shopify Partner
109 43 39

Kiteさん

 

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

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

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

 

小笠原 京平 | 株式会社Tsun | RuffRuff アプリ
・私の回答が役に立ったら、いいね! ボタンをクリックして教えてください!
Shopify 開発で役に立つ情報を発信していますので、テックブログおすすめ Shopifyアプリ もぜひご参照ください。
Kitatema
Shopify Partner
16 0 0

Tsun 小笠原さま

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

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

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

ogasawarakyohei
Shopify Partner
109 43 39

成功

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>

と変更します。

小笠原 京平 | 株式会社Tsun | RuffRuff アプリ
・私の回答が役に立ったら、いいね! ボタンをクリックして教えてください!
Shopify 開発で役に立つ情報を発信していますので、テックブログおすすめ Shopifyアプリ もぜひご参照ください。
Kitatema
Shopify Partner
16 0 0

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

Kite
Shopify Partner
9 0 1

Tsun 小笠原さま

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

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