経緯

デザイナーさんより、shopifyで用意しているフォントを一部分だけ使用したいとの要望があった。
https://shopify.dev/tutorials/develop-theme-fonts#browse-available-fonts
ここで使いたいフォントを見つけてきたようだ。

困ったこと

テーマ全体に管理画面からフォントを設定するなどは検索でヒットするが、
cssでfont-familyを設定しての使い方が見当たらない。

shopifyでのフォントの持ち方

shopifyではフォントはCDNに置いてある。そのため、希望のフォントのCDNのURLを取得できればcssでfont-faceを設定してあとは自由にいつもどおり使うことができる。

解決方法

※注意※かなり力技で、確実に間違った方法なのできちんとした方法、shopifyが推奨する方法を検討すること。
使っているテーマはDebut。

1.上記URLより指定されたフォントのHandleを取得する

　　ここではitc_bodoni_seventytwo_n4を使用する。

2.settings_data.jsonで使用したいフォントのHandleを

"type_header_font": "work_sans_n4",　などに上書きする。

{
  "current": {
     ~~略~~
    "type_header_font": "itc_bodoni_seventytwo_n4",
    "type_header_base_size": 30,
    "type_base_font": "itc_bodoni_seventytwo_n4",
    "type_base_size": 16,
　　　~~略~~

後でもとに戻すので、適当な場所で良い。

3.ソースの適当な場所でフォントの情報を表示する

 {% assign header_font = settings.type_header_font %}           
 {{ header_font | font_face }}

先程のsettings_data.jsonで設定したフォント情報を呼び出してやる。
そうすると画面上にフォント情報が表示される。
今回の例だと、

@font-face {
  font-family: "ITC Bodoni Seventytwo";
  font-weight: 400;
  font-style: normal;
  src: url("https://fonts.shopifycdn.com/itc_bodoni_seventytwo/itcbodoniseventytwo_n4.35b85b69a5f5602a2219d69cee05b98f10b229df.woff2?h1=c3RvcmUucGlja2kuanA&hmac=6964601e49fed26c2460227171e04a7fb986d6e1af70f31b4f7ea6362fd3974d") format("woff2"),
       url("https://fonts.shopifycdn.com/itc_bodoni_seventytwo/itcbodoniseventytwo_n4.265b175ca2d7c753d5669b0d8f687673f761b05b.woff?h1=c3RvcmUucGlja2kuanA&hmac=68cd204db2045c48cb019180128abecb9c88dc7d74a9ba824cf278e24e55a8dd") format("woff");
}

このような形でフォントの情報を取得することができる。

これをcssファイルの適当な場所に設定してやると希望するフォントを好きな場所で使うことができる。

最後に

もしかしてこんなことしなくても、font-family: "ITC Bodoni Seventytwo";だけでも使える？
いや、でも"ITC Bodoni Seventytwo"は探してこないといけないしな。。。
もっといいやり方があったら教えて下さい！

Shopifyで用意されているフォントをliquidで使用する

経緯