Magento 2: How to set load custom font as preload?

Generally, if you load font as preload, it will load first and it will help to increase site speed.

So If you want to add custom font as preload, you need to perform settings as shown below:

The first step is to set your font .woff or .woff2 file in your theme web/fonts folder.

Then after you need to set that font in between head like below in default.xml layout file.

<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<font src="fonts/custom-font.woff2"/>
</head>
</page>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

-->

<head>

</head>

</page>

Fill the below form if you have any Magento programming need.

Make your site sales-friendly by optimizing the search box
The search box is the most underrated functionality that is...
Why should you have a Magento support agency?
Managing and customizing Magento site can be a daunting task,...
Hire Magento Developers as Per Your Flexibility and Requirements
Having an in-house eCommerce developer is very costly, and it...
5 Mistakes in Magneto are killing your conversion rates!!
Have you wonder why your conversions are less compare to...
Is your eCommerce well maintained?
According to a research, around 68% of eCommerce stores are...

Author Info

Magento Developer

Hire T. Baldha

Fill the form & Get Installation Support