Some fonts are not working in font-picker

Shopify Discussion
1

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.family }}, {{ header_font_new.fallback_families }}; font-weight: {{header_font_new.weight}}; font-style: {{header_font_new.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 …

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

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.

3

Hey man, i found a working solution, it’s pretty easy actually.

So basically, you want your website CSS to include the font-face of the selected font before actually using it.

I have this in my section settings

{
"type": "font_picker",
"id": "title_font",
"label": "Font",
"default": "work_sans_n6"
},

Then, I would go on top of my custom section and write

I’m not using variables because they are totally lame and useless

{{ section.settings.title_font | font_face}}

This will output the font-face required to view the font.

Then, to use the font:

.main-banner-title
{
	  font-family:	{{ section.settings.title_font.family }}, {{ section.settings.title_font.fallback_families }};
   	font-weight: 	{{ section.settings.title_font.weight }};
   	font-style: 	{{ section.settings.title_font.style }};
}

I know that this is an old discussion but maybe it could help others.
have a good day everyone!

2 Likes