Some fonts are not working in font-picker

New Member
12 0 0

Hi, I'm building a theme and I've implemented font-picker in blocks of section.

But some fonts are working fine, but some fonts are not working.

Here are initializing codes for font-face.


<style type="text/css">
  {%- assign header_font_new = block.settings.header_font_new -%}
  {{ header_font_new | font_face }};
  {%- assign header_font_bold = header_font_new | font_modify: 'weight', 'bolder' -%}
  {%- assign header_font_italic = header_font_new | font_modify: 'style', 'italic' -%}
  {%- assign header_font_bold_italic = header_font_new | font_modify: 'style', 'italic' -%}
{{ header_font_bold | font_face }} {{ header_font_italic | font_face }} {{ header_font_bold_italic | font_face }} </style>

I did inline class like the below


<h1 class="slide-content__heading size--{{ heading_size }}" style="font-family: {{ }}, {{ header_font_new.fallback_families }}; font-weight: {{header_font_new.weight}}; font-style: {{}};">{{ heading }}</h1>

For working fonts, when i check this h1 element in chrome, it looked like this..

<h1 class="slide-content__heading size--xlarge" style="font-family: Arvo, serif; font-weight: 400; font-style: normal;">Take Charge in the morning</h1>

For not working fonts, it looked like this.

<h1 class="slide-content__heading size--xlarge" style="font-family: " baskerville="" no="" 2",="" serif;="" font-weight:="" 400;="" font-style:="" normal;"="">Take Charge in the morning</h1>

As you can see, there are many "" symbols when the font is not working. 

Why this error happens?

If I list several examples more here

1. Working fonts

Arapey, Archivo, Arimo, Beefcakes ...


2. Not working fonts

Avenir next rounded, Basic commercial, ...


In my opinion, 50% is working, and 50% is not working.

Is this Shopify font-picker issue??