Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@keninph1

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

More than 1 year has passed since last update.

経緯

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

1
Help us understand the problem. What is going on with this article?
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.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?