Shopifyでフォント追加（Webfontの読み込み方）

今回は、ShopifyでWebfontの読み込み方を備忘録として残します。 メイリオを読み込む場合、メイリオのwoffファイルを手に入れます。 基本的にはWindowsPCに入っているのでそのファイルを利用します。 形式がttcファイルなど、woffファイルでない場合は、オンライン上で変換できるWebサービスが無料で存在するので、 そちらで変換してください。

• ttcからttfへの変換は以下のサイトhttps://transfonter.org/ttc-unpack
• ttfからwoffへの変換は以下のサイトhttps://convertio.co/ja/ttf-woff/

woffファイルを手に入れたら、Shopifyの管理画面にログインし、コンテンツ管理のファイルにUPします。 開発している身からするとテーマ内のassetsディレクトリ以下に設置したくなりますが、 どうもassetsでは文字コードの都合で正しく認識できないようです。 （しっかり確認した訳ではないですが、海外の記事に上記内容の投稿があったので今回はファイルにUPしています）

以下のように、CSSを記述します。

	
		@font-face {
		  font-family: "Meiryo";
		  font-style: normal;
		  font-weight: 400;
		  src: url("https://cdn.shopify.com/s/files/1/000/000/000/files/Meiryo-01.woff;) format("woff");
		}
	

今回はメイリオを読み込みたいので上記の内容にしています。srcのurl内にファイルのURLを記述しています。