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

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

untamedtallow
Excursionist
40 0 8

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.

Reply 1 (1)

oscprofessional
Shopify Partner
15961 2387 3095

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 <head> 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:

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Other head content -->

  <!-- Preload custom font -->
  <link rel="preload" href="{{ 'Wild_Wolf.woff2' | asset_url }}" as="font" type="font/woff2" crossorigin="anonymous">

  <!-- Existing CSS and JS files -->
</head>
<body>
  <!-- Your body content -->
</body>
</html>

 

 

 

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free