How can I add a preload tag to the liquid css for a custom font?

Technical Q&A
,
1

I am trying to add a preload tag to the custom font liquid code below.

@font-face {
font-family: ‘Wild Wolf’;
src: local(‘Wild Wolf’), url(‘https://cdn.shopify.com/s/files/1/0625/6872/6713/files/Wild_Wolf.woff2?v=1661833383’) format(‘woff2’);
}

I have uploaded the .woff2 file to Shopify Files and it is also in my assets if that is better to pull from.

How can I add a preload tag and should I use the shopify files reference like I currently am or should I be using the asset_url reference?

My url is https://untamedtallow.com/

My goal is to speed up the loading of the word UNTAMED on my home page.

2

Hello @untamedtallow

Open theme.liquid:

  • In your Shopify admin, go to Online Store > Themes.
  • Find your current theme and click on Actions > Edit code.
  • In the Layouts folder, open the theme. liquid.

Add Preload Tag in Under tag

Modify @font-face in CSS:

  • Ensure your CSS code is correct and references the asset URL if needed.
  • Open your relevant CSS or SCSS file where the font is declared. It could be in the Assets folder (like theme.scss.liquid or a similar file).
@font-face {
font-family: 'Wild Wolf';
src: local('Wild Wolf'), url('{{ "Wild_Wolf.woff2" | asset_url }}') format('woff2');
font-weight: normal;
font-style: normal;
}

Final Code Example in theme.liquid

Here is how it should look in your theme. liquid file:

After implementing these changes:

  1. Save the changes in your theme files.
  2. Go to your website and refresh the page.
  3. Use browser developer tools (F12 or right-click > Inspect) to check the network tab. You should see the font being preloaded.

I hope this solution is useful if any issues arise with me I will provide the proper solution
Thanks