preload_tag filter lacking crossorigin option

[chris-naturesgold]

I have the following code, which theme-check is flagging as "For better performance, prefer using the preload_tag filter":

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

I tried using this liquid:

{{ header_font | font_url | preload_tag: as: 'font' }}

which generates this code:

<link href="not a real url" rel="preload" as="font" rel="preload">

But as its missing the crossorigin tag, this code isn't used due to CORS

Is adding the option to specifiy a crossorigin tag the correct approach?

[shayanabbas]

you can get crossorigin set like this:
{{ header_font | font_url | preload_tag: as: 'font', type: 'font/woff2', crossorigin: 'anonymous' }}

[chris-naturesgold]

Thanks Shyan, wasn't aware of that syntax.

[chris-naturesgold]

Tried it out, unfortunately it created a broken url with &amp's in it (I've changed the domain name)

<link href="[//www.foo.com/cdn/fonts/maven_pro/mavenpro_n7.e506aba5117dad0788c3d4b353911c4b801e66e9.woff2?h1=bmF0dXJlc2dvbGQuY29tLmF1&amp;h2=bmF0dXJlcy1nb2xkLmFjY291bnQubXlzaG9waWZ5LmNvbQ&amp;h3=bmF0dXJlc2dvbGRzaW5nYXBvcmUuY29tLnNn&amp;h4=bmF0dXJlc2dvbGQuZ2xvYmFs&amp;h5=bmF0dXJlc2dvbGR1c2EuY29t&amp;hmac=42ad76b444445ce5bf339421737e154f96f40589b1154b2e41528186fc707ecd](view-source:https://www.foo.com/cdn/fonts/maven_pro/mavenpro_n7.e506aba5117dad0788c3d4b353911c4b801e66e9.woff2?h1=bmF0dXJlc2dvbGQuY29tLmF1&h2=bmF0dXJlcy1nb2xkLmFjY291bnQubXlzaG9waWZ5LmNvbQ&h3=bmF0dXJlc2dvbGRzaW5nYXBvcmUuY29tLnNn&h4=bmF0dXJlc2dvbGQuZ2xvYmFs&h5=bmF0dXJlc2dvbGR1c2EuY29t&hmac=42ad76b444445ce5bf339421737e154f96f40589b1154b2e41528186fc707ecd)" rel="preload" as="font" type="font/woff2" crossorigin="anonymous" rel="preload">

verses the original code:
<link rel="preload" as="font" href="{{ header_font | font_url }}" type="font/woff2" crossorigin>

which generates a functional url:

<link rel="preload" as="font" href="[//www.foo.coml/cdn/fonts/maven_pro/mavenpro_n7.e506aba5117dad0788c3d4b353911c4b801e66e9.woff2?h1=bmF0dXJlc2dvbGQuY29tLmF1&h2=bmF0dXJlcy1nb2xkLmFjY291bnQubXlzaG9waWZ5LmNvbQ&h3=bmF0dXJlc2dvbGRzaW5nYXBvcmUuY29tLnNn&h4=bmF0dXJlc2dvbGQuZ2xvYmFs&h5=bmF0dXJlc2dvbGR1c2EuY29t&hmac=42ad76b444445ce5bf339421737e154f96f40589b1154b2e41528186fc707ecd](view-source:https://www.foo.com/cdn/fonts/maven_pro/mavenpro_n7.e506aba5117dad0788c3d4b353911c4b801e66e9.woff2?h1=bmF0dXJlc2dvbGQuY29tLmF1&h2=bmF0dXJlcy1nb2xkLmFjY291bnQubXlzaG9waWZ5LmNvbQ&h3=bmF0dXJlc2dvbGRzaW5nYXBvcmUuY29tLnNn&h4=bmF0dXJlc2dvbGQuZ2xvYmFs&h5=bmF0dXJlc2dvbGR1c2EuY29t&hmac=42ad76b444445ce5bf339421737e154f96f40589b1154b2e41528186fc707ecd)" type="font/woff2" crossorigin>

[shayanabbas]

hmm but it shouldn't matter when you click the font URL does it download successfully or works or given any error?

To fix this, you can use the url_param_escape filter in Shopify Liquid to encode the URL. Try this code:

{{ header_font | font_url | url_param_escape | preload_tag: as: 'font', type: 'font/woff2', crossorigin: 'anonymous' }}

[chris-naturesgold]

It raises this error: "Missing or malformed 'hmac' query string parameter"

url_param_escape converts & to %26 which also results in that error.

perhaps this is another use case for #1490 ?

[chris-naturesgold]

ChatGPT gave this solution:

module AmpersandFilter
  def unescape_ampersands(input)
    input.gsub('&', '&')
  end
end

Liquid::Template.register_filter(AmpersandFilter)

which is then called via:

{{ your_variable_containing_ampersands | unescape_ampersands }}

question is - where should you put the module code?

[chris-naturesgold]

I must have made an error in testing. Shayan's original suggestion did indeed work, closing.

[mangitmaharjan]

Hi there,

I just wanted to add a few query to this thread as my query is related to preload_tag.

Issue: When i use preload_tag for font that is hosted on https://fonts.shopifycdn.com, the preload_tag is throwing error "Input must be a theme or shop asset URL.".

Code:
{{ settings.type_body_font | font_url | preload_tag: 'font/woff2', crossorigin: 'anonymous' }}

Expected Output:

Output:
Input must be a theme or shop asset URL.