Liquid error: font_url can only be used with a font drop - HELP!

UK_Aspire_Vendo
Pathfinder
114 8 23

Hi folks,

I'm just tidying up some issues which are slowing down our site and I'm coming across a 404 error code with the following showing:Screenshot 2021-07-14 at 14.52.06.png

This particular error is putting a 320ms delay on our site loading, so I'd like to get it out of the way.

I cannot to any degree figure out what this could be - can anyone assist at all?

Thanks!

Replies 8 (8)

clipse
Shopify Partner
7 0 0

I got the same error in recent days, Please HELP!

UK_Aspire_Vendo
Pathfinder
114 8 23

The solution for this was explained to me on another forum - it turns out that I was using a non system font - if you change that the error will go away!

clipse
Shopify Partner
7 0 0

How can I find what non system font I use? Thanks a lot

clipse
Shopify Partner
7 0 0

<link rel="preload" as="font" href="{{ header_font | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ base_font | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ base_font_bold | font_url }}" type="font/woff2" crossorigin>

 

it seems they system cannot use the variable font_url properly. how can I fix this

UK_Aspire_Vendo
Pathfinder
114 8 23

I'm no expert, but it seems as if the system is trying to find a font that doesn't have an alternative format (ie bold, semibold etc)

Either change your font to a system font (you can do this in your theme editor, system fonts appear at the top of the typography section) or you'll have to find a code which will replace a non-existent font face with one that already exists.

clipse
Shopify Partner
7 0 0

font_url is a liquid filter, can any one help this?

 

I don't change the font of the theme, however, I encountered this problem

OKCK
Visitor
3 0 0

This problem can be related with wrong font variable name. Please check if the font variable name is the same in theme.liquid and settings_schema.json.

babysunflower
Visitor
1 0 0

I have commented this lines:


<!--
<link rel="preload" as="font" href="{{ header_font | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ base_font | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ base_font_bold | font_url }}" type="font/woff2" crossorigin>

<script>console.log('settings.font_source: {{settings.font_source}}');</script>
<script>console.log('header_font: {{header_font}}');</script>
-->

 

For some reason this line 
{%- assign base_font_bold = base_font | font_modify: 'weight', 'bold' -%}

returns a null value for base_font_bold. That causes an error here:

<link rel="preload" as="font" href="{{ base_font_bold | font_url }}" type="font/woff2" crossorigin>

 

After that, I checked the website and I see that the fonts are not equal so I edited the theme.css.liquid file.

For some reason, some OOTB code from my theme wasn't working nicely. I found the right code and paste it on all places where the font-family was mentioned. 

 

/* custom added to change all fonts to be the same */
font-family: {% if fnt_df_bd == '1' %}{{font-stack-body}}{% elsif fnt_df_bd == '2' %}{{font-stack-heading}}{% else %}{{font-stack-sub}}{% endif %};

Milan Strahinic
Owner of Ignis Avis International LLC