mk777
1
Google Fontsの中で、”解星 特ミン”を使いたいと思いました。
最初は、下記のコードをheader.liquidのstyleタグの終了タグの手前に挿入しました。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kaisei+Tokumin:wght@800&display=swap" rel="stylesheet">
でも、この警告メッセージがでました。
そのためダウンロードして、使おうとしています。
今回カスタマイズした商品ページの見出しに使いたいと思い、この商品ページのsectionファイルに下記のコードを追加しました。
/* 日本語フォント読み込み */
@font-face {
font-family: "KaiseiTokumin-Bold";
src: url("{{ 'KaiseiTokumin-Bold.ttf' | asset_url }}") ;
}
@font-face {
font-family: "KaiseiTokumin-ExtraBold";
src: url("{{ 'KaiseiTokumin-ExtraBoldd.ttf' | asset_url }}") ;
}
@font-face {
font-family: "KaiseiTokumin-Medium";
src: url("{{ 'KaiseiTokumin-Medium.ttf' | asset_url }}") ;
}
@font-face {
font-family: "KaiseiTokumin-Regular";
src: url("{{ 'KaiseiTokumin-Regular.ttf' | asset_url }}") ;
}
そして、見出しのところに、
.it_font_t {
font-family: 'KaiseiTokumin-Regular';
}
と書いてみました。
でも、反映されないのです。
こちらの記事も、確認しました。
https://www.shopify.com/partners/blog/web-fonts-to-enhance-stores
でも、日本語のフォントを使いたいのです。
Google FontsのAPIを使えば、”解星 特ミン”も使えるのでしょうか？
すみません。
日本語のフォントの実装方法についてご教示して頂けましたら幸いです。
mk777
2
今使っているテーマは、Dawnでversion3.0です。
style.cssを見たけたので、その最後に上記のコードを追加しました。
でも、フォントが変化しません。
こちらの記事も、確認してます。
https://hayakihayabusa.com/shopify-font/
mk777
3
こちらの記事を確認しました。
https://shopify.dev/docs/themes/architecture/settings/fonts
これは、ウェブ上でコピーしたテーマにフォントを追加する際も、アセットにアップロードしては、いけないということでしょうか？
今、ウェブ上でフォントファイルをアセットに、アップロードしていました。
mk777
4
フォントのファイルをwoffに変換しましたが、変化ありませんでした。
mk777
5
mk777
6
theme.css.liquidが無いので、自分で作りました。
そしてtheme.liquidの中に、
{{ 'theme.css.liquid' | asset_url | stylesheet_tag }}
を追加して読めるようにしましたが、変化ありません。
theme.css.liquidの中は、このように書きました。
{% style %}
/* 日本語フォント読み込み */
@font-face {
font-family: "KaiseiTokumin-Bold";
src: url(" {{ 'KaiseiTokumin-Bold.woff2' | asset_url }}") format("woff2"),
url(" {{ 'KaiseiTokumin-Bold.woff' | asset_url }}") format("woff");
}
@font-face {
font-family: "KaiseiTokumin-ExtraBold";
src: url(" {{ 'KaiseiTokumin-ExtraBold.woff2' | asset_url }}") format("woff2"),
url(" {{ 'KaiseiTokumin-ExtraBold.woff' | asset_url }}") format("woff");
}
@font-face {
font-family: "KaiseiTokumin-Medium";
src: url(" {{ 'KaiseiTokumin-Medium.woff2' | asset_url }}") format("woff2"),
url(" {{ 'KaiseiTokumin-Medium.woff' | asset_url }}") format("woff");
}
@font-face {
font-family: "KaiseiTokumin-Regular";
src: url(" {{ 'KaiseiTokumin-Regular.woff2' | asset_url }}") format("woff2"),
url(" {{ 'KaiseiTokumin-Regular.woff' | asset_url }}") format("woff");
}
{% endstyle %}
mk777
7
すみません。
今、このコードを書いています。
{% style %}
/* 日本語フォント読み込み */
@font-face {
font-family: "KaiseiTokumin-Bold";
src: url("KaiseiTokumin-Bold.woff2") format("woff2"),
url("KaiseiTokumin-Bold.woff") format("woff");
}
@font-face {
font-family: "KaiseiTokumin-ExtraBold";
src: url("KaiseiTokumin-ExtraBold.woff2") format("woff2"),
url("KaiseiTokumin-ExtraBold.woff") format("woff");
}
@font-face {
font-family: "KaiseiTokumin-Medium";
src: url("KaiseiTokumin-Medium.woff2") format("woff2"),
url("KaiseiTokumin-Medium.woff") format("woff");
}
@font-face {
font-family: "KaiseiTokumin-Regular";
src: url("KaiseiTokumin-Regular.woff2") format("woff2"),
url("KaiseiTokumin-Regular.woff") format("woff");
}
{% endstyle %}
