Help us understand the problem. What is going on with this article?

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

経緯

デザイナーさんより、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"は探してこないといけないしな。。。
もっといいやり方があったら教えて下さい!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした