Blog

I want to add below in the head of Magneto 2 via default.xml, unable to get the exact syntax for same.

<link rel="preload" href="https://example.com/static/version1580127835/frontend/theme/theme_more/en_US/css/fonts/Museo-500.otf" as="font" type="font/woff2" crossorigin>

https://github.com/magento/magento2/blob/2.3.6/app/design/frontend/Magento/luma/Magento_Theme/layout/default_head_blocks.xml#L11-L15

This isn’t possible out the box using layout XML, the best options seem to be either manually doing so in a template which isn’t great, or using a plugin such as https://github.com/meanbee/magento2-csspreload which allows you to do this.

<referenceBlock name="head.csspreload">
    <arguments>
        <argument name="assets" xsi:type="array">
            <item name="unique_name" xsi:type="array">
                <item name="path" xsi:type="string">css/filename.css</item>
                <item name="attributes" xsi:type="array">
                    <item name="name" xsi:type="string">attribute</item>
                    <item name="value" xsi:type="string">value</item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>

For some one who use

 https://github.com/meanbee/magento2-csspreload, this module could make an issue with MIME type when try to add fonts.

<argument name="link_template" xsi:type="string"><![CDATA[<link rel="preload" as="font" crossorigin href=":path:" :attributes: />]]></argument>

Full code will look like this:

<referenceBlock name="head.csspreload">
            <arguments>
                <argument name="assets" xsi:type="array">
                    <item name="fa_solid_900" xsi:type="array">
                        <item name="path" xsi:type="string">plugins/font-awesome/webfonts/fa-solid-900.woff2</item>
                        <item name="attributes" xsi:type="array">
                            <item name="name" xsi:type="string">attribute</item>
                            <item name="value" xsi:type="string">value</item>
                        </item>
                    </item>
                    <item name="lora_v16_latin_regular" xsi:type="array">
                        <item name="path" xsi:type="string">fonts/Lora/lora-v16-latin-regular.woff2</item>
                        <item name="attributes" xsi:type="array">
                            <item name="name" xsi:type="string">attribute</item>
                            <item name="value" xsi:type="string">value</item>
                        </item>
                    </item>
                    <item name="lora_v16_latin_700" xsi:type="array">
                        <item name="path" xsi:type="string">fonts/Lora/lora-v16-latin-700.woff2</item>
                        <item name="attributes" xsi:type="array">
                            <item name="name" xsi:type="string">attribute</item>
                            <item name="value" xsi:type="string">value</item>
                        </item>
                    </item>
                    <item name="luma_icons" xsi:type="array">
                        <item name="path" xsi:type="string">fonts/Luma-Icons.woff2</item>
                        <item name="attributes" xsi:type="array">
                            <item name="name" xsi:type="string">attribute</item>
                            <item name="value" xsi:type="string">value</item>
                        </item>
                    </item>
                    <item name="fa_brands_400" xsi:type="array">
                        <item name="path" xsi:type="string">plugins/font-awesome/webfonts/fa-brands-400.woff2</item>
                        <item name="attributes" xsi:type="array">
                            <item name="name" xsi:type="string">attribute</item>
                            <item name="value" xsi:type="string">value</item>
                        </item>
                    </item>
                </argument>
                <argument name="link_template" xsi:type="string"><![CDATA[<link rel="preload" as="font" crossorigin href=":path:" :attributes: />]]></argument>
            </arguments>
        </referenceBlock>