Shopify に AdobeFontsを読み込む方法

Shopifyのデフォルトフォント以外を使いたいにゃん。今回は、AdobeFontsから追加する方法にゃん。

Shopifyにも数多くの日本語フォントが登録されていますが、「これじゃないんだよ〜」という時があるんですよね。

無料で使えるgoogleFontsはなかなか日本語フォントの種類が少ないので、これまた「う〜ん」と悩むところ。

そこで今回はAdobeFontsをShopifyで利用する方法です（AdobeCCユーザーであれば、商用にも使うことができます）

AdobeFontsをwebサイトで使う方法

AdobeFontsをwebサイトで利用する方法は、公式のヘルプサイトに掲載されています。

まずは上記のヘルプサイトを参照しながら、
「使用するフォントの選択」と「Web プロジェクトの作成」
をすすめましょう。

Web プロジェクトの作成まで終われば、Shopify側で使用する準備に入ります。

ShopifyでAdobeFontsを使う方法

ShopifyのliquidにAdobeFontsの読み込み用jsを追記

AdobeFontsで作成したプロジェクトの<script></script>で記載されているjavascriptを、
Shopifyテーマの「Layout」フォルダのtheme.liquidの</html>タグ直下にペーストします。

ShopifyでCSSから追加fontsを利用する

さっそくShopifyで、追加したフォントを利用しましょう。

cssの変更となりますので、方法はいくつかありますので、今回使いしたAdbeFontsを利用したい範囲に合わせて、cssやliquidに追加していきましょう。

にゃん花子

FacebookInstagram

「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め｜文系から独学でWeb屋さんになった人｜インフラ分野のわかるWebディレクター｜主にWordpressのサイト立ち上げ、リプレイス、運用をしています｜Shopifyもはじめました | アニメ・映画・ドラマを聴きながら、ブツブツ呟きながら、制作するのが好きです | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中｜小学１年生の壁に負けじと２０２４年も奮闘します