FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

CDNを使って、フォントを読み込む方法について

CDNを使って、フォントを読み込む方法について

だいき
Shopify Partner
2 0 0

ShopifyでCDNを使って、フォントを読み込む方法について教えていただきたい。

■達成したいこと
任天堂がホームページで使用しているフォントがあります。
https://www.nintendo.co.jp/

こちらはCDNを経由すれば使えるようで、フォントを作成した会社のホームページに記載がありました。
https://yakuhanjp.qranoko.jp/

なので、ShopifyでCDNを経由して特定のフォントを使用するための設定をしたい

■調べたこと base_urlを使うとCDN経由のフォントも使えるようです いくつかリンクも貼っておきます。
https://qiita.com/eijiSaito/items/e951067577b542271ab6
https://labo.kon-ruri.co.jp/shopify-liquid-font-filters/
https://shopify.dev/api/liquid/filters/font_face
https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face

■やってみたこと
フォントに関わる変更でしたので、コード編集からbase.cssなどを編集してみましたが、さっぱりでした。

■わからなかったこと
・base_urlのコードをどのファイルに書けば良いのかわからない
ご教授お願いできますでしょうか?
お手数ですがよろしくお願いいたします。

2件の返信2

株式会社フルバランス
Shopify Partner
1676 591 773

だいきさま

 

はじめまして、フルバランスの園畑です。
ご質問を確認いたしました。

 

外部フォントの導入ですが、基本的にtheme.liquidの<head>内に下記(cdnのリンク)を記入すれば良いかと存じます。

 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css">

cssのコードは、任意のcssファイル等に記載くださいませ。


ご参考までに。
 
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
 
分からない点があれば、またいつでもご連絡ください。
 
フルバランス 園畑

株式会社フルバランス
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『つくる人、売る人の成長と成功を最大化する。』 株式会社フルバランス
だいき
Shopify Partner
2 0 0

フルバランス 園畑様

 

お返事ありがとうございます。

 

head内にCDNのリンクを貼り付けることで対処することはわかりました。

ありがとうございます。

 

わからない点がありましたので、追加で質問をさせてください。

任意のCSSファイルに記述する。

とありますが、任意のファイルとは

・新規で作成したCSSファイル

・既に作成済みのCSSファイル

どちらでも良いと解釈してよろしいでしょうか?

 

お返事をお待ちしております。