I'm doing some page speed optimization and it says that I should preload some icons.

enter image description here

I've got this command but I can't find where to add it, they say that It should be added to the <head> but I'm not sure where. I tried adding it to my default_head_blocks.xml but it broke the site:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

I've been following this but they don't tell where to add it.

3 Answers 3


I know its too late to answer, but adding my finding to help others. I have tested this in Magento 2.4.x and below solution is working fine.

  1. Create your custom theme.
  2. Under Magento_Theme/layout folder create default_head_blocks.xml file.
  3. Add you font by using below code:

<font src="fonts/fontawesome-webfont.woff2"/>

  1. Flush the cache & do static-content deploy.

Above code will automatically add in the font. For reference you can check the Luma theme default_head_blocks.xml file.

Note: For example, if you want to add fontawesome-webfont.woff2?v=4.5.0 then it will not work. It will only work with the exact filename as I mentioned above. enter image description here



Have a look on this. I guess you can add that on the HTML head.



A very quick and simple place to add preload/prefetch/preconnect directives is in: Admin > Content > Design > Configuration > [YOUR STORE] > HTML Head > Scripts and Stylesheets

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.