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?

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('') 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


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

Reply 1 (1)

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">
  <!-- 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 -->
  <!-- Your body content -->




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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: | 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