グーグルフォントを読み込んだところ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

 

 

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

 

0 件の「いいね!」
jizo
先駆者
224 80 248

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

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

0 件の「いいね!」