FROM CACHE - jp_header

グーグルフォントを読み込んだところtheme.scsss.liquidでエラーが出る

totetita
訪問者
1 0 0

コードについて知識不足なので、教えていただけると助かります。

https://note.com/gooddoctor/n/nce84b2ef484d

こちらの情報を元にグーグルフォントを読み込んで?みました。

「theme.liquid」ファイルにGoogle Fontsのリンクを貼る

は問題なくできたのですが、

③「theme.scsss.liquid」ファイルのfont-familyを書き換え

をしたところ

Undefined variable: "$font-style-header". at 1458

というエラーが出て、レイアウトも崩れてしまいました。

元の表記に書き直したのですがエラーが治りません

該当箇所と思われる部分のコードは以下です

/*================ Typography ================*/

{% assign header_font = settings.type_header_font %}
{% assign base_font = settings.type_base_font %}

{{ header_font | font_face }}
{{ base_font | font_face }}

{%- assign base_font_bolder = base_font | font_modify: 'weight', 'bolder' -%}
{%- assign base_font_bold = base_font | font_modify: 'weight', 'bold' -%}
{%- assign base_font_italic = base_font | font_modify: 'style', 'italic' -%}
{%- assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic' -%}

{{ base_font_bold | font_face }}
{{ base_font_bolder | font_face }}
{{ base_font_italic | font_face }}
{{ base_font_bold_italic | font_face }}

$font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
$font-weight-body--bolder: {{ base_font_bolder.weight | default: 700 }};

$font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
$font-stack-body: {{ base_font.family }}, {{ base_font.fallback_families }};
$font-weight-header: {{ header_font.weight }};

$font-stack-body: {{ base_font.family }}, {{ base_font.fallback_families }};
$font-style-body: {{ base_font.style }};
$font-weight-body: {{ base_font.weight }};

$font-size-header: {{ settings.type_header_base_size }} * 1px;

$font-size-base: {{ settings.type_base_size }}px; // Henceforth known as 1em

$font-stack-cart-notification: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

$font-size-mobile-input: 16px; // min 16px to prevent zooming

 

 

原因を教えたいただけると助かります!

 

1件の返信1

Jizo_Inagaki
Shopify Partner
990 373 690

恐らくですが、$font-stack-bodyの行が同じ記述で二つあるため、本来は上の方は$font-style-headerの行であったのではと思います。

なお上記があっているか否かにかかわらず、初期状態のテーマの同じファイルの差分を確認し元の記述を調べれば元に戻せるはずです。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。