外部ライブラリ・フォント・アイコン
ライブラリ・Webフォント・アイコンの導入可否を判断し、性能を落とさず組み込める
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、ライブラリ・Webフォント・アイコンを入れるかどうかを判断し、速度を落とさずに組み込めるようになります。
受託では、有償フォントのWeb利用ライセンスを確認せずにassetsへ置くと、そのままライセンス違反になるので、判断の基準を先に持っておきます。
ライブラリを入れるかどうかの判断
「入れれば動く」ものでも、速度と保守とライセンスの代償があります。
スライダーは、CSSのscroll-snapで足りることが多いです。
必要なら軽量なものを選び、外部CDNではなくassetsにローカル配置します。
可用性（外部が落ちても動くこと）と保守を、テーマの中で完結させるためです。
日本語Webフォントはどう扱うか
Shopifyのフォントライブラリには、日本語書体もあります。
Noto Sans / Serif Japanese、BIZ UD、M PLUSなどをfont_pickerから選べます。
収録書体は変わるので、まずここに無いかを確認します。
ライブラリに無い書体は@font-faceとassetsで配信しますが、サブセット化（使う文字だけに絞ること）をしないと数MBになります。font-display: swapを必ず指定します。
アイコンはどう出すか
SVGをsnippets/icon-cart.liquidのように分け、{% render %}でインラインに出力します。
Skeleton themeはinline_asset_contentフィルタで、assetsのSVGをインラインにしています。
アイコンフォントは、読み込みとアクセシビリティの面で避けます。
発展：サードパーティスクリプトとライセンス
計測・チャット・レビューのスクリプトは、アプリ埋め込み経由が基本です。theme.liquidに直書きすると、テーマ更新で消えたり、削除し忘れたりします。
ブランド指定のフォントは、Web利用のライセンスを確認します。
有償フォントを勝手にassetsに置くと、ライセンス違反になります。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。