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??


9 2 2

I am having the exact same issue.

I have a feeling this is one of those special unspoken Shopify issues that just won't be dealt with. I have worked on some themes for clients that they purchased and the issue exists right out of the box as well. I don't think is has to do with the implementation.

If anyone wants to pop in and demonstrate how to get 100% of the fonts working I would be happy to be wrong but so far half the fonts are not working for me as well. I can get the Google fonts working consistently and that's about it.